快捷導(dǎo)航

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

更新時間：2017年08月03日 09:13:31 作者：WangPanJu

這篇文章主要介紹了解決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é)束，有條件進(jìn)行下個加載 
            $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有條件進(jìn)行下次上拉加載 
              $scope.hasmore = true; 
            } 
          } else { 
            $scope.hasmore = false; 
            $scope.$broadcast('scroll.infiniteScrollComplete'); 
          } 
        }) 
    }</span>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

詳解angular2如何手動點擊特定元素上的點擊事件
這篇文章主要介紹了詳解angular2如何手動點擊特定元素上的點擊事件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
AngularJS 入門教程之事件處理器詳解
本文主要介紹AngularJS 事件處理器,這里整理了相關(guān)資料和示例代碼，有需要的小伙伴可以參考下
2016-08-08
Angular2整合其他插件的方法
本文給大家詳細(xì)分析了Angular2整合其他插件的方法，有興趣的朋友學(xué)習(xí)下。
2018-01-01
AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制,結(jié)合實例形式分析了AngularJS雙向數(shù)據(jù)綁定機(jī)制的原理及實現(xiàn)方法,以及減少需要重復(fù)開發(fā)代碼量的優(yōu)勢,需要的朋友可以參考下
2017-01-01
AngularJS教程之環(huán)境設(shè)置
本文主要介紹AngularJS環(huán)境設(shè)置,學(xué)習(xí)AngularJS的朋友肯定要設(shè)置開發(fā)軟件的環(huán)境,這里詳細(xì)介紹安裝設(shè)置流程，有需要的朋友可以參考下
2016-08-08
angular分頁指令操作
這篇文章主要為大家詳細(xì)介紹了angular分頁指令操作的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
AngularJS中如何使用echart插件示例詳解
之前因為項目的需求，第一次系統(tǒng)的使用了angular這一優(yōu)秀的js框架，其所擁有的許多優(yōu)秀特性極大的方便了項目的開發(fā)，然而在開發(fā)中也遇到過不少的問題，趁著最近有時間給大家總結(jié)一下，這篇文章將會介紹使用angularjs1結(jié)合百度的圖表插件echart作為例子用以演示。
2016-10-10
angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
AngularJs用戶登錄問題處理（交互及驗證、阻止FQ處理）
這篇文章主要為大家詳細(xì)介紹了AngularJs用戶登錄問題處理，包括交互及驗證、阻止FQ處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10