解決ionic和angular上拉加載的問題
說到ionic上拉加載就跟pc的分頁是一樣的,他需要在html數(shù)據(jù)列表的最下面邊添加
<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> </ion-infinite-scroll>
當(dāng)列表為空 當(dāng)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)站的支持!
相關(guān)文章
Angular.js跨controller實現(xiàn)參數(shù)傳遞的兩種方法
這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實現(xiàn)參數(shù)傳遞的兩種方法,文中給出了詳細(xì)的介紹和示例代碼,相信對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-02-02使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09Angular-UI Bootstrap組件實現(xiàn)警報功能
這篇文章主要介紹了Angular-UI Bootstrap組件實現(xiàn)警報功能,對Angular.js services的學(xué)習(xí)有所幫助,需要的朋友可以參考下2018-07-07AngularJS基礎(chǔ) ng-keypress 指令簡單示例
本文主要介紹AngularJS ng-keypress 指令,這里幫大家整理了基礎(chǔ)資料,并附是示例代碼,有需要的小伙伴可以參考下2016-08-08