解決ionic和angular上拉載入的問題，ionicangular

解決ionic和angular上拉載入的問題，ionicangular

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

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

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

<span style="font-size:18px;">                        //如果請求到的資料小於pageSize，證明沒資料可讀</span> <span style="font-size:18px;"><span style="white-space:pre">            </span>//hasmore變為false，不會執行上拉載入             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有條件進行下次上拉載入               $scope.hasmore = true;             }           } else {             $scope.hasmore = false;             $scope.$broadcast('scroll.infiniteScrollComplete');           }         })     }</span> 

總結

以上所述是小編給大家介紹的解決ionic和angular上拉載入的問題，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！