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如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注毛票票网站！