無限滾動JSON響應

Question

我有無限滾動功能的麻煩。 每當我向下滾動loadMore函數時調用兩次，每次加載2頁而不是1頁。 在日誌中我看到裝載2和第3頁：

loadMore 2 
loadMore 3 

然後負載4和第5頁：

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一次？ This my template：

<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

你應該廣播DataLoader.get

什麼happenning是GET方法assincronous的回調裏面infiniteScrollComplete活動，讓你的數據被添加到列表中的事件被觸發後。

嘗試改變你的代碼到這個，它應該工作。

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

我也遇到過這個問題。下面是我用來解決它

• 取下離子複習，看看它是否只調用一次
• 如果是的話，那麼從無限滾動取出的距離和直接檢查
• 在一些提示您控制器，調用API
• 時刪除超時和播出你的成功回調這兩個事件
  • $範圍$廣播（「scroll.infiniteScrollComplete」）。
    
  • $ scope。$ broadcast（'scroll.resize'）;