Ionic 목록 assync 요청이있는 무한 스크롤 문제

assync 요청으로 채워진 이오니아 목록에 문제가 있습니다. 나는 다음과 같은 한 HTML에서Ionic 목록 assync 요청이있는 무한 스크롤 문제

: NG-초기화에서

<ion-list class="list" ng-init="setDateRange('today');" > 
      <!--IF NO ITEM IS FOUND --> 
      <ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null"> 
       <h2>No data found, try to make few calls</h2> 
      </ion-item> 

      <ion-item class="item" ng-repeat="listDataItem in listData"> 
      <!--HTML CONTENT OF ITEM REMOVED FROM EXAMPLE --> 
      </ion-item> 

      <ion-infinite-scroll 
        icon="ion-loading-c" 
        distance="10%" 
        on-infinite="setDateRange('past')"> 
      </ion-infinite-scroll> 
</ion-list>

은 데이터베이스 분리 방법에 assync 요청을 트리거하는 방법 setDateRange 방법이라고합니다.

나는이 문제가 다음과 같은 $ broadcast 메소드 scroll.infiniteScrollComplete의 구현에있을 수 있다고 생각합니다. 때문에 NG-초기화 동안

는

$scope.updateList = function() { 
      console.log('Trying to update list'); 
      $timeout(function() { 
       $scope.$apply(function() { 
        listData.forEach(function(item){ 
         $scope.listData.push(item); 
         console.log("List length is "+ $scope.listData.length); 
        }); 
        $ionicLoading.hide(); 
       }); 
       $scope.$broadcast('scroll.infiniteScrollComplete'); // should be removed in production 
       $scope.$broadcast('scroll.resize'); 
      }); 
     }; 

     $scope.createList = function() { 
      console.log('Trying to render list'); 
      alert("render"); 
      $timeout(function() { 
       $scope.$apply(function() { 
        $scope.listData = listData; 
        console.log("List length is "+ $scope.listData.length); 
       }); 
       // Infinite scroll broadcast should be here to avoid 
       // triggering of the on-infinite event 
       $scope.$broadcast('scroll.infiniteScrollComplete'); 
      }); 
      $ionicLoading.hide(); 
     };

도 $ scope.listData이 순간에 존재하지 않기 때문에 할 수없는 방법 updateList을 트리거됩니다.

누군가는

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

및 올바른 방법으로

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

를 구현하는 방법을 말해 줄 수 있을까요?

도움 주셔서 감사합니다.

출처

2014-10-12 redrom

다음은 몇 가지 메모이며 전체 구현을 보여주는 하단의 데모 링크입니다. 완전한 코드가 없으면 테스트하고 다른 병목 현상이 있는지 확인하기가 약간 어렵습니다.

저는 ng-init을 사용하지 않고 컨트롤러에서 호출합니다. 그렇다면 정확하게 언제 알 수 있습니다.
컨트롤러에 변수를 설정하여 모델을 초기화 할 수 있습니다. $scope.listData = [];.
scroll.resize 이벤트를 브로드 캐스트하지 않아도됩니다. ionList을 ionContent 또는 ionScroll 안에 넣어야합니다.
class="item"을 <ion-item>에 넣지 않아도 자동으로 추가됩니다.
무한 스크롤에 ng-if을 추가하여 더 많은 데이터로드를 중지 할 수 있습니다 (아래 예 참조).
항상 $scope.apply()을 사용하지 않아야하며,이 경우 어쨌든 필요하지 않습니다.

저는 최근에 infiniteScroll을 사용하는 좋은 예를 통해 만든 코드 펫입니다.이 코드는 잘 사용하는 방법을 이해하는 데 도움이 될 수 있습니다. http://codepen.io/gnomeontherun/pen/HJkCj

출처

2014-10-12 20:22:45

감사합니다. Jeremy .. – Dolo

Ionic 목록 assync 요청이있는 무한 스크롤 문제

답변

관련 문제