JSONレスポンス無限スクロール

Question

無限スクロール機能に問題があります。 毎回loadMore関数をスクロールするときに2回呼び出され、毎回1ページの代わりに2ページが読み込まれます。次に、負荷4と5ページ

loadMore 2 
loadMore 3 

：

loadMore 4 
loadMore 5 

この私のコントローラ：

.controller('PostsCtrl', function($scope, $http, DataLoader, $timeout, $ionicSlideBoxDelegate, $rootScope, $log) { 

    var postsApi = $rootScope.url + 'posts'; 

    $scope.moreItems = false; 

    $scope.loadPosts = function() { 

    // Get all of our posts 
    DataLoader.get(postsApi).then(function(response) { 

     $scope.posts = response.data; 

     $scope.moreItems = true; 

     $log.log(postsApi, response.data); 

    }, function(response) { 
     $log.log(postsApi, response.data); 
    }); 

    } 

    // Load posts on page load 
    $scope.loadPosts(); 

    paged = 2; 

    // Load more (infinite scroll) 
    $scope.loadMore = function() { 

    if(!$scope.moreItems) { 
     return; 
    } 

    var pg = paged++; 

    $log.log('loadMore ' + pg); 

    $timeout(function() { 

     DataLoader.get(postsApi + '?page=' + pg).then(function(response) { 

     angular.forEach(response.data, function(value, key) { 
      $scope.posts.push(value); 
     }); 

     if(response.data.length <= 0) { 
      $scope.moreItems = false; 
     } 
     }, function(response) { 
     $scope.moreItems = false; 
     $log.error(response); 
     }); 

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

    }, 1000); 

    } 

    $scope.moreDataExists = function() { 
    return $scope.moreItems; 
    } 

    // Pull to refresh 
    $scope.doRefresh = function() { 

    $timeout(function() { 

     $scope.loadPosts(); 

     //Stop the ion-refresher from spinning 
     $scope.$broadcast('scroll.refreshComplete'); 

    }, 1000); 

    }; 

}) 

をloadMore一度呼び出す方法 はログでは、私は2と3のページを読み込む参照してください？ このテンプレート：

<ion-view view-title="Posts"> 
    <ion-content> 
    <ion-refresher on-refresh="doRefresh()"></ion-refresher> 
    <ion-list> 
     <ion-item class="item-icon-right" ng-repeat="post in posts track by $index" href="#/app/posts/{{post.id}}" track> 
      <!-- <img ng-if="post.featured_image" ng-src="{{post._embedded['http://v2.wp-api.org/attachment'][0][$index].source_url}}" class="alignleft" /> --> 
      <h2 ng-bind-html="post.title.rendered"></h2> 
      <p ng-if="post.excerpt.rendered" ng-bind-html="post.excerpt.rendered"></p> 
      <i class="icon ion-chevron-right icon-accessory"></i> 
     </ion-item> 
    </ion-list> 

    <ion-infinite-scroll 
    ng-if="moreDataExists()" 
    on-infinite="loadMore()" 
    distance="1%" 
    immediate-check="false"> 
    </ion-infinite-scroll> 

    </ion-content> 
</ion-view> 

Answer 1

あなたはhappenning何DataLoader.get

のコールバック内infiniteScrollCompleteイベントをブロードキャストする必要がありGetメソッドがassincronousあるので、イベントが発生した後にデータがリストに追加されています。

コードをこれに変更してみるとうまくいくはずです。

DataLoader.get(postsApi + '?page=' + pg).then(function(response) { 

    angular.forEach(response.data, function(value, key) { 
     $scope.posts.push(value); 
    }); 

    if(response.data.length <= 0) { 
     $scope.moreItems = false; 
    } 

    // Place here 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 

    }, function(response) { 
    $scope.moreItems = false; 
    $log.error(response); 
    }); 

Answer 2

私はこの問題にも直面していました。ここで私は、イオン復​​習を外し、でyesの場合、無限スクロールから

を距離と即時チェックを外した場合、それは一度だけ

を呼び出すかどうかを確認し、それを

• を解決するために使用されるいくつかのヒントがありますあなたのコントローラ、API
• を呼び出すときにタイムアウトを削除し、あなたの成功コールバックでこれらの2つのイベントが放送
  • $スコープ$放送（「scroll.infiniteScrollComplete」）。
    
  • $ scope。$ broadcast（ 'scroll.resize'）;