angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法
第一步，首先需要在<ion-content>標(biāo)簽里面加入標(biāo)簽<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>
里面的屬性解釋，
ng-if 值 布爾型，如果為true，則可以觸發(fā)上拉事件
on-infinite 上拉時觸發(fā)的事件
distance 列表底部滾動到可觸發(fā)上拉事件的距離，默認(rèn)為1%
icon 加載時顯示的加載圖標(biāo)，默認(rèn)為 'ion-loading-d'
第二步：在控制器內(nèi)書寫
$scope.hasmore = true;
定義可觸發(fā)事件的對象
然后書寫loadMore事件
//上拉事件
$scope.loadMore = function () {
$scope.dataValue.page++;
loadajax();
}
然后寫loadajax事件
function loadajax() {
var dataValue = $scope.dataValue;
var ip = "http://" + $rootScope.form.ip + "/appGetpage";
var req = {
method: 'POST', //請求的方式
url: ip, //請求的地址
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Accept': '*/*'
}, //請求的頭，如果默認(rèn)可以不寫
timeout: 5000, //超時時間，還沒有測試
data: "value=" + JSON.stringify(dataValue) //message 必須是a=b&c=d的格式
};
$http(req).success(function (data) {
if (data.data.length == 0) {
$scope.hasmore = false;//這里判斷是否還能獲取到數(shù)據(jù)，如果沒有獲取數(shù)據(jù)，則不再觸發(fā)加載事件
return;
}
$scope.items = $scope.items.concat(data.data);
}).error(function () {
console.log("err");
}).finally(function () {
$scope.$broadcast('scroll.infiniteScrollComplete');//這里是告訴ionic更新數(shù)據(jù)完成，可以再次觸發(fā)更新事件
$scope.$broadcast('scroll.refreshComplete');
});
}
以上所述是小編給大家介紹的angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
利用Jasmine對Angular進(jìn)行單元測試的方法詳解
單元測試是一種能夠幫助開發(fā)者驗(yàn)證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對Angular進(jìn)行單元測試的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
深入解析Angular動態(tài)導(dǎo)入和懶加載實(shí)例
這篇文章主要為大家深入解析了Angular動態(tài)導(dǎo)入和懶加載實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngularJS基礎(chǔ) ng-paste 指令簡單示例
本文主要介紹AngularJS ng-paste 指令,這里對ng-paste 指令的基礎(chǔ)資料做了整理,并附有代碼示例,有需要的朋友可以參考下2016-08-08
Angularjs的Controller間通信機(jī)制實(shí)例分析
這篇文章主要介紹了Angularjs的Controller間通信機(jī)制,結(jié)合實(shí)例形式分析了Controller通信機(jī)制的原理、實(shí)現(xiàn)技巧與相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法：使用RxJS操作符和使用Angular自帶的工具,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-02-02
Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動表單和響應(yīng)式表單（也稱為模型驅(qū)動表單）,使用模板驅(qū)動表單時,模板指令被用來構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個示例 Angular 應(yīng)用程序2024-02-02
Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)
下面小編就為大家?guī)硪黄狝ngular中使用$watch監(jiān)聽object屬性值的變化(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
詳解Angular 4.x 動態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動態(tài)創(chuàng)建組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了angularJS 中$attrs方法使用指南,需要的朋友可以參考下2015-02-02