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