html页面如下
<ion-content> <ion-refresher pulling-text="刷新" on-refresh="search()"></ion-refresher> <!---首页内容--> <div> <ul> <li ng-repeat="position in positions">内容</li> </ul> </div> <!--首页内容结束--> <ion-infinite-scroll ng-if="searchModel.offset<=(positions.count-10)" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> </ion-content>
js如下
angular.module('app') .controller('IndexCtrl', function($scope, positionService) { $scope.searchModel = {
offset: 0
}
//下拉刷新
$scope.search = function(){
$scope.searchModel.offset = 0;
positionService.getPositions($scope.searchModel)
.then(function(response){
$scope.positions = response.data;
},function(error){
})
}
//上拉加载
$scope.loadMore = function(){
$scope.searchModel.offset += 10;
positionService.getPositions($scope.searchModel)
.then(function(response){
$scope.positions = $scope.positions.concat(response.data);
},function(error){
})
}
})
具体用法参考 http://www.ionic.wang/js_doc-index-id-25.html http://www.ionic.wang/js_doc-index-id-29.html