【转载】 ionic 的 下拉刷新 与 上拉加载

这篇文章是讲解 Ioinc中怎么实现 下拉刷新和上拉加载的。也是我们日常做项目是必不可少的功能。有兴趣的小伙伴可以来学习一下。

更多关于 IONIC 的资源： http://www.aliyue.net/?s=ionic

HTML部分

 <ion-view view-title="消息通知">
   <ion-content class="padding">
 　<!-- <ion-refresher> 下拉刷新指令  -->
   <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(0, 40)}}
         </div>
       </div>
     </div>
     <!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时，就禁止执行on-infinite  -->
     <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
   </ion-content>
 </ion-view>

JS部分

• 　　on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast(‘scroll.refreshComplete‘);
• 　　on-infinite 上拉触发的函数 同样需要广播事件结束 $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: {
       perPage: 5,
       currentPage: 1
     },
     init: function () {
       services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, 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‘);
       }, 1000);
     },
     loadMore: function () {
       vm.pagination.currentPage += 1;
       services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
         vm.messages = vm.messages.concat(data);
         if (data.length == 0) {
           vm.moredata = true;
         };
         $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
       })
     }
   }
   vm.init();
 })

此处的messages 是view显示的数据，pagination是做分页加载显示的参数，service是我封装的$http服务，show方法是view信息显示的开关（这些都可以不用注意）！

部分转载自：http://www.cnblogs.com/ailen226/p/4626166.html