解決ionic和angular上拉加載的問題

來源：懂視網責編：小采時間：2020-11-27 22:33:33

解決ionic和angular上拉加載的問題

解決ionic和angular上拉加載的問題:說到ionic上拉加載就跟pc的分頁是一樣的，他需要在html數據列表的最下面邊添加 <ion-infinite-scroll ng-if=hasmore on-infinite=loadMore() distance=10%> </ion-infinite-scroll> 當列表為空

推薦度：

點擊下載本文 文檔為doc格式

導讀解決ionic和angular上拉加載的問題:說到ionic上拉加載就跟pc的分頁是一樣的，他需要在html數據列表的最下面邊添加 <ion-infinite-scroll ng-if=hasmore on-infinite=loadMore() distance=10%> </ion-infinite-scroll> 當列表為空

說到ionic上拉加載就跟pc的分頁是一樣的，他需要在html數據列表的最下面邊添加

<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) { 
 //把每次請求到的數據都拼接起來 
 var a = $scope.notice; 
 $scope.notice = a.concat(e); 
 console.log($scope.notice); 
 //廣播上個加載結束，有條件進行下個加載 
 $scope.$broadcast('scroll.infiniteScrollComplete'); $scope.newsList.pageIndex++;</span>

<span style="font-size:18px;"> //如果請求到的數據小于pageSize，證明沒數據可讀</span> 

<span style="font-size:18px;"><span style="white-space:pre"> </span>//hasmore變為false，不會執行上拉加載 
 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>

總結

以上所述是小編給大家介紹的解決ionic和angular上拉加載的問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com