ionic 上拉加载更多
一、html文件中:
<ion-infinite-scroll ng-if="action.moreDataCanBeLoaded()" on-infinite="action.loadMore()" distance="15%"></ion-infinite-scroll>
二、controller中
var message = { page: 0, pageno: 1 }; //定义数据 $scope.data = { hasMoreDataCanBeLoaded: false, //接口返回值的初始化 messageList: [] // 获取消息类别下的消息列表接口 }; $scope.action.moreDataCanBeLoaded = function () { return $scope.data.hasMoreDataCanBeLoaded; }; // 上拉加载更多 $scope.action.loadMore = function () { message.page++; getMessageList(); }; // ======获取消息类别下的消息列表接口======== function getMessageList() { var urlParam = { action: 'categories', id: pageId, page: message.page, page_no: message.pageno }; ResourceFactory.Message.get(urlParam).$promise.then( //成功回调 function (indata) { if (!!indata && indata.hasOwnProperty("data") && indata.data.length > 0) { if (indata.data.length < message.pageno) { $scope.data.hasMoreDataCanBeLoaded = false; } else { $scope.data.hasMoreDataCanBeLoaded = true; } //合并数组(新数据合并到老数据中) $scope.data.messageList.push.apply($scope.data.messageList, indata.data); console.log('接口返回成功'+ angular.toJson($scope.data.messageList)); } else { $scope.data.hasMoreDataCanBeLoaded = false; } }, //失败回调 function (rejection) { console.log('接口返回失败,失败数据' + angular.toJson(rejection)); }).finally(function () { $scope.$broadcast('scroll.infiniteScrollComplete'); //停止广播 }); } getMessageList();