說到ionic上拉加載就跟pc的分頁是一樣的,他需要在html數(shù)據(jù)列表的最下面邊添加
<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> </ion-infinite-scroll>
當列表為空 當ng-if為true的時候, 列表沒有被填充滿的時候 ,他就會自動加載loadMore();
<span style="font-size:18px;"> $scope.loadMore = function() { Msdk.postJSON('/informNotice/queryNoticeInfo', { pageIndex: $scope.newsList.pageIndex, pageSize: $scope.newsList.pageSize, informIds: $scope.newsList.informIds }, function(e) { if(e.length != 0) { //把每次請求到的數(shù)據(jù)都拼接起來 var a = $scope.notice; $scope.notice = a.concat(e); console.log($scope.notice); //廣播上個加載結(jié)束,有條件進行下個加載 $scope.$broadcast('scroll.infiniteScrollComplete'); $scope.newsList.pageIndex++;</span>
<span style="font-size:18px;"> //如果請求到的數(shù)據(jù)小于pageSize,證明沒數(shù)據(jù)可讀</span> <span style="font-size:18px;"><span style="white-space:pre"> </span>//hasmore變?yōu)閒alse,不會執(zhí)行上拉加載 if(e.length < $scope.newsList.pageSize) { $scope.hasmore = false; } else {</span> [javascript] view plain copy <span style="font-size:18px;"><span style="white-space:pre"> </span>//為true有條件進行下次上拉加載 $scope.hasmore = true; } } else { $scope.hasmore = false; $scope.$broadcast('scroll.infiniteScrollComplete'); } }) }</span>
總結(jié)
以上所述是小編給大家介紹的解決ionic和angular上拉加載的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com