解決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的時(shí)候, 列表沒有被填充滿的時(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ù)都拼接起來 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,證明沒數(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上拉加載的問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 利用Ionic2 + angular4實(shí)現(xiàn)一個(gè)地區(qū)選擇組件
- Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法
- Ionic + Angular.js實(shí)現(xiàn)圖片輪播的方法示例
- AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲(chǔ)
- ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
- Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能
- angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法
- angular+ionic返回上一頁并刷新頁面
相關(guān)文章
Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法
這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法,文中給出了詳細(xì)的介紹和示例代碼,相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-02-02使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能
這篇文章主要介紹了Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能,對(duì)Angular.js services的學(xué)習(xí)有所幫助,需要的朋友可以參考下2018-07-07AngularJS基礎(chǔ) ng-keypress 指令簡單示例
本文主要介紹AngularJS ng-keypress 指令,這里幫大家整理了基礎(chǔ)資料,并附是示例代碼,有需要的小伙伴可以參考下2016-08-083個(gè)可以改善用戶體驗(yàn)的AngularJS指令介紹
這篇文章主要介紹了3個(gè)可以改善用戶體驗(yàn)的AngularJS指令,AngularJS是一款具有很高人氣的JavaScript框架,需要的朋友可以參考下2015-06-06