ionic下拉刷新上拉加载
2017-10-12 本文已影响86人
HughesCZB
1、下拉刷新
html
<!--写在页面顶部-->
<ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()"></ion-refresher>
controller.js
$scope.doRefresh = function (){
getComment.then(function(res){ //请求新数据
if(res.result=="success") {
$scope.allComment = res.data; //数据更新操作
$scope.$broadcast('scroll.refreshComplete'); //记得加上这段
}
})
}
2、上拉加载
html
<!--写在页面底部-->
<ion-infinite-scroll on-infinite="loadMore()" ng-if="hasmore" distance="1%"></ion-infinite-scroll>
<div style="background-color:#fff;text-align:center" ng-if="!hasmore">没有更多了</div>
controller.js
$scope.hasmore = true;
$scope.loadMore = function() {
$scope.pageNum ++;
$http({
method: 'GET',
url: '/data/allComment/allComment'+$scope.pageNum+'.json'
}).then(function successCallback(res) {
if(res.data.result=="success"){
if(res.data.data.length!=0){
res.data.data.forEach(function(item){
$scope.allComment.push(item)
})
$scope.$broadcast('scroll.infiniteScrollComplete');
}else{
$scope.hasmore = false;
$scope.$broadcast('scroll.infiniteScrollComplete');
}
}
}, function errorCallback(res) {
// 请求失败执行代码
$scope.hasmore = false;
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}
记得每次上拉结束都要加上这句
$scope.$broadcast('scroll.infiniteScrollComplete');