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

這篇文章主要介紹了如何解決ionic和angular上拉加載的問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

說到ionic上拉加載就跟pc的分頁是一樣的，他需要在html數據列表的最下面邊添加

<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> 
</ion-infinite-scroll>

當列表為空 當ng-if為true的時候， 列表沒有被填充滿的時候 ，他就會自動加載loadMore（）；

<span >      $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) { 
            //把每次請求到的數據都拼接起來 
            var a = $scope.notice; 
            $scope.notice = a.concat(e); 
            console.log($scope.notice); 
            //廣播上個加載結束，有條件進行下個加載 
            $scope.$broadcast('scroll.infiniteScrollComplete');             $scope.newsList.pageIndex++;</span>

<span >                        //如果請求到的數據小于pageSize，證明沒數據可讀</span> 

<span ><span >            </span>//hasmore變為false，不會執行上拉加載 
            if(e.length < $scope.newsList.pageSize) { 
              $scope.hasmore = false; 
            } else {</span> 
[javascript] view plain copy
<span ><span >              </span>//為true有條件進行下次上拉加載 
              $scope.hasmore = true; 
            } 
          } else { 
            $scope.hasmore = false; 
            $scope.$broadcast('scroll.infiniteScrollComplete'); 
          } 
        }) 
    }</span>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決ionic和angular上拉加載的問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!