Ionic如何实现下拉刷新与上拉加载功能
IONIC是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScriptMVVM框架和AngularJS来增强应用。提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。
本文给大家介绍Ioinc中怎么实现下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能,感兴趣的朋友一起看看吧。
HTML部分
<ion-viewview-title="消息通知"> <ion-contentclass="padding"> <!--<ion-refresher>下拉刷新指令--> <ion-refresherpulling-text="Pulltorefresh"on-refresh="vm.doRefresh()"></ion-refresher> <divclass="listcard"ng-repeat="messageinvm.messages"> <divclass="itemitem-divideritem-icon-right">{{message.title}} <iclass="icon"ng-click="vm.show(message)"ng-class="message.static?‘ion-arrow-down-b‘:‘ion-arrow-right-b‘"></i></div> <divclass="itemitem-body"> <div> {{message.static?message.content:message.content.substr(,)}} </div> </div> </div> <!--ion-infinite-scroll上拉加载数据指令distance默认%nf-if的值为false时,就禁止执行on-infinite--> <ion-infinite-scrollng-if="!vm.moredata"on-infinite="vm.loadMore()"distance="%"></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){ varvm=$scope.vm={ moredata:false, messages:[], pagination:{ perPage:, currentPage: }, 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‘); },); }, loadMore:function(){ vm.pagination.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(); })
此处的messages是view显示的数据,pagination是做分页加载显示的参数,service是我封装的$http服务,show方法是view信息显示的开关(这些都可以不用注意)!
关于小编给大家介绍的Ionic如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了,希望对大家有所帮助,如果大家想了解更多内容敬请关注毛票票网站!