ion-infinite-scroll实现上拉刷新

直接上代码

html：

<ion-content>
<ion-infinite-scroll ng-if="moredata" on-infinite="loadMore()" distance="5%" style="height: 1px;" ></ion-infinite-scroll>
</ion-content>

ion-infinite-scroll要写在ion-content才有效 moredata 控制是否能继续像服务器请求数据 loadMore方法为用户每次加载到页脚时触发的方法

controller中代码：

$scope.moredata = true;
var page = 1;
var pageSize = 10;
$scope.models= [];

function loadData(){
$http({
url:,
params : {
"page" : page,
"rows" : pageSize,},
method:"get"
}).success(function(data) {
for(i in data.rows){
$scope.models.push(data.rows[i]);
}
if(data.total>page*pageSize){
$scope.moredata = true;
}else{
$scope.moredata = false;
}
page++;
$scope.$broadcast('scroll.infiniteScrollComplete');
}).error(function() {
alert("服务器错误");
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}

$scope.loadMore = function(){
loadData();
}

注意一定要加

$scope.$broadcast('scroll.infiniteScrollComplete');

才能使得上拉加载有效果