这篇文章是讲解 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