How to realize the _javascript skill of ionic and pull load function

Ionic is currently the most potential HTML5 mobile phone application Development framework. Building an application through SASS, it provides a number of UI components to help developers develop powerful applications. It uses JavaScript MVVM frameworks and Angularjs to enhance applications. Provides two-way binding of data that is used as a common choice between WEB and mobile developers. Ionic is a development framework focused on web development technology, based on HTML5 to create a native application similar to a mobile platform. The purpose of the Ionic framework is to develop mobile applications from a Web perspective, based on a PHONEGAP compilation platform that enables applications compiled into various platforms.

This article introduces how to achieve the Ioinc and pull up loading function. In the project development often encounter this function, interested friends to take a look at it.

HTML section

<ion-view view-title= "message notification" >
<ion-content class= "padding" >
<!--<ion-refresher> Drop-down Refresh instruction-->
<ion-refresher pulling-text= "Pull to Refresh" on-refresh= "Vm.dorefresh ()" ></ ion-refresher>
<div class= "list card" ng-repeat= "message in Vm.messages" >
<div class= "item Item-divider item-icon-right ">{{message.title}}
<i class=" icon "ng-click=" vm.show (message) "ng-class=" Message.static? ' Ion-arrow-down-b ': ' Ion-arrow-right-b ' ></i></div>
<div class= "Item Item-body" >
< Div>
{message.static?message.content:message.content.substr (,)}}
</div>
</div>
</div>
<!--ion-infinite-scroll load data directive distance the default% nf-if value is false, the execution of On-infinite is prohibited-->
<ion-infinite-scroll ng-if= "!vm.moredata" on-infinite= "Vm.loadmore ()" distance= "%" ></ ion-infinite-scroll>
</ion-content>
</ion-view>

JS part

On-refresh The function function that is triggered by the pull down must be broadcast before the end of the event $scope. $broadcast (' Scroll.refreshcomplete ');

The function that triggers the On-infinite also requires the broadcast event to end $scope. $broadcast (' Scroll.infinitescrollcomplete ');

 Angular.module (' starter.controllers ', []). Controller (' Infoctrl ', function ($rootScope , $timeout, $interval, $scope, $http, services) {var VM = $scope. VM = {moredata:false, messages: [], pagination: {perp Age:, CurrentPage:}, Init:function () {services.getmessages ({perPage:vm.pagination.perPage, Page:vm.pagination.curr
Entpage}, function (data) {vm.messages = data;}) }, show:function (message) {if (message.static) {message.static = false;} else {message.static = true;}}, Dorefresh : function () {$timeout (function () {$scope. $broadcast (' Scroll.refreshcomplete ');},);}, Loadmore:function () {VM.PA
Gination.currentpage + =; Services.getmessages ({perPage:vm.pagination.perPage, page:vm.pagination.currentPage}, function (data) {Vm.messages
= Vm.messages.concat (data);
if (data.length = =) {Vm.moredata = true;};
$scope. $broadcast (' Scroll.infinitescrollcomplete ');
})} vm.init (); })

The messages here is the view display of the data, pagination is to do the paging load display parameters, service is my encapsulated $http service, Show method is view information display of the switch (these can not be noticed)!

About the small set to introduce the ionic how to achieve Drop-down refresh and pull the relevant content of loading on the introduction of the end, I hope to help you, if you want to learn more content please pay attention to cloud Habitat community website!