第一步，首先需要在<ion-content>標簽里面加入標簽<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>
里面的屬性解釋，
ng-if 值 布爾型，如果為true，則可以觸發(fā)上拉事件
on-infinite 上拉時觸發(fā)的事件
distance 列表底部滾動到可觸發(fā)上拉事件的距離，默認為1%
icon 加載時顯示的加載圖標，默認為 'ion-loading-d'
第二步：在控制器內書寫
$scope.hasmore = true;
定義可觸發(fā)事件的對象
然后書寫loadMore事件
//上拉事件 $scope.loadMore = function () { $scope.dataValue.page++; loadajax(); } 然后寫loadajax事件
function loadajax() { var dataValue = $scope.dataValue; var ip = "http://" + $rootScope.form.ip + "/appGetpage"; var req = { method: 'POST', //請求的方式 url: ip, //請求的地址 headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept': '*/*' }, //請求的頭，如果默認可以不寫 timeout: 5000, //超時時間，還沒有測試 data: "value=" + JSON.stringify(dataValue) //message 必須是a=b&c=d的格式 }; $http(req).success(function (data) { if (data.data.length == 0) { $scope.hasmore = false;//這里判斷是否還能獲取到數據，如果沒有獲取數據，則不再觸發(fā)加載事件 return; } $scope.items = $scope.items.concat(data.data); }).error(function () { console.log("err"); }).finally(function () { $scope.$broadcast('scroll.infiniteScrollComplete');//這里是告訴ionic更新數據完成，可以再次觸發(fā)更新事件 $scope.$broadcast('scroll.refreshComplete'); }); } 以上所述是小編給大家介紹的angular+ionic 的app上拉加載更新數據實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
