解決ionic和angular上拉加載的問(wèn)題
說(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)站的支持!
- 利用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返回上一頁(yè)并刷新頁(yè)面
相關(guān)文章
Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法
這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法,文中給出了詳細(xì)的介紹和示例代碼,相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-02-02
使用Angular material主題定義自己的組件庫(kù)的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫(kù)的配色體系的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能
這篇文章主要介紹了Angular-UI Bootstrap組件實(shí)現(xiàn)警報(bào)功能,對(duì)Angular.js services的學(xué)習(xí)有所幫助,需要的朋友可以參考下2018-07-07
AngularJS基礎(chǔ) ng-keypress 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keypress 指令,這里幫大家整理了基礎(chǔ)資料,并附是示例代碼,有需要的小伙伴可以參考下2016-08-08
3個(gè)可以改善用戶體驗(yàn)的AngularJS指令介紹
這篇文章主要介紹了3個(gè)可以改善用戶體驗(yàn)的AngularJS指令,AngularJS是一款具有很高人氣的JavaScript框架,需要的朋友可以參考下2015-06-06

