无限滚动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'）;