【轉載】 ionic 的 下拉刷新 與 上拉載入

這篇文章是講解 Ioinc中怎麼實現 下拉刷新和上拉載入的。也是我們日常做項目是必不可少的功能。有興趣的小伙伴可以來學習一下。

更多關於 IONIC 的資源： http://www.aliyue.net/?s=ionic

HTML部分

 1 <ion-view view-title="消息通知">
 2   <ion-content class="padding">
 3 　<!-- <ion-refresher> 下拉刷新指令  -->
 4   <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
 5     <div class="list card" ng-repeat="message in vm.messages" >
 6       <div class="item item-divider item-icon-right">{{message.title}}
 7         <i class="icon" ng-click="vm.show(message)" ng-class="message.static?‘ion-arrow-down-b‘:‘ion-arrow-right-b‘"></i></div>
 8       <div class="item item-body">
 9         <div>
10           {{message.static?message.content:message.content.substr(0, 40)}}
11         </div>
12       </div>
13     </div>
14     <!-- ion-infinite-scroll 上拉載入數據指令 distance預設1% nf-if的值為false時，就禁止執行on-infinite  -->
15     <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
16   </ion-content>
17 </ion-view>

JS部分

• 　　on-refresh 下拉觸發的函數 函數執行結束之前必須廣播下該事件結束 $scope.$broadcast(‘scroll.refreshComplete‘);
• 　　on-infinite 上拉觸發的函數 同樣需要廣播事件結束 $scope.$broadcast(‘scroll.infiniteScrollComplete‘);

 1 angular.module(‘starter.controllers‘, [])
 2 .controller(‘InfoCtrl‘, function($rootScope, $timeout, $interval, $scope, $http, services) {
 3   var vm = $scope.vm = {
 4     moredata: false,
 5     messages: [],
 6     pagination: {
 7       perPage: 5,
 8       currentPage: 1
 9     },
10     init: function () {
11       services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
12         vm.messages = data;
13       })
14     },
15     show: function (message) {
16       if (message.static) {
17         message.static = false;
18       } else {
19         message.static = true;
20       }
21     },
22     doRefresh: function () {
23       $timeout(function () {
24         $scope.$broadcast(‘scroll.refreshComplete‘);
25       }, 1000);
26     },
27     loadMore: function () {
28       vm.pagination.currentPage += 1;
29       services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
30         vm.messages = vm.messages.concat(data);
31         if (data.length == 0) {
32           vm.moredata = true;
33         };
34         $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
35       })
36     } 
37   }
38   vm.init();
39 })

此處的messages 是view顯示的數據，pagination是做分頁載入顯示的參數，service是我封裝的$http服務，show方法是view信息顯示的開關（這些都可以不用註意）！

部分轉載自：http://www.cnblogs.com/ailen226/p/4626166.html