2016-12-30 91 views
1

我使用「離子無限滾動」,以html從服務器加載多個項目此我使用以下代碼爲什麼離子無限滾動不斷調用Android中的滾動?

<ion-infinite-scroll immediate-check="false" on-infinite="getListOfAreas()" distance="1%"> 
    </ion-infinite-scroll> 

這裏,getListOfAreas()當我滾動屏幕底部和函數被調用它取從server.This數據是getListOfAreas()上控制器定義的函數

$scope.getListOfAreas = function (shoudlShowLoader) { 
AreaBusiness.getAreasListing(shoudlShowLoader, function(serviceResponse) { 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
     if (serviceResponse != null) { 
      var isSuccess = serviceResponse.Success; 
      if (isSuccess) { 

      } 
     } 
    } 
} 

在瀏覽器中,我已調試一些如何

$scope.$broadcast('scroll.infiniteScrollComplete'); 

上面的代碼行不斷的調用和微調保持旋轉。我不知道原因。我錯過了什麼?

回答

1

$scope.$broadcast('scroll.infiniteScrollComplete');只讓離子知道當前的數據頁已被提取,並且現在可以安全地讀取下一頁。這並不表示所有數據都已完成加載。

看起來官方的建議是將一個ng-if添加到滾動委託,並在沒有更多數據加載時從dom中刪除它。

例子:

<ion-infinite-scroll 
    ng-if="moreDataCanBeLoaded()" 
    icon="ion-loading-c" 
    on-infinite="loadMoreData()"> 
</ion-infinite-scroll> 

來源:https://ionicframework.com/docs/api/directive/ionInfiniteScroll/

+0

我希望在Web服務調用完成後停止微調器。爲此我使用了$ scope。$ broadcast('scroll.infiniteScrollComplete');在服務回撥功能天氣的反應成功與否。這不是一個好主意嗎?請糾正我如果我以錯誤的方式使用這種方法。還有一件事,我已經在另一個控制器中使用了相同的方法,並且在該控制器上它按預期正常工作。服務電話接收時,Spinner停止。 –

+1

就像我在答案中提到的那樣,只要'ion-infinite-scroll'委託在DOM中,並且它已經完成加載如'scroll.infiniteScrollComplete'所指示的最後一頁,則微調控制器將繼續旋轉。 – Chanthu

0

我已經解決了這個問題,有時花後。我發現的問題是,我沒有將這些元素添加到要在UI上顯示的列表中。因此,名單沒有被更新的控制器,這就是爲什麼它一直calling.So我更新了我的代碼,增加了從服務中獲取那些物品列表關聯到的UI在我下面的代碼

$scope.$broadcast('scroll.infiniteScrollComplete'); 
if (serviceResponse != null) { 
    var isSuccess = serviceResponse.Success; 
     if (isSuccess) {   
      if ($scope.areas != undefined && $scope.areas.length > 0) { 
       pushDataToPOIList(serviceResponse.PointOfInterestData); 
      } else { 
       $scope.areas = serviceResponse.PointOfInterestData; 
      } 

pushDataToVehiclesList提到的()方法我補充說,將新數據推入列表以更新列表和UI。這幫助我解決了這個問題。