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？这是我的模板：

<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

我也遇到过这个问题。这是我用来解决它的一些技巧

移除离子刷新器，看看它是否只调用一次
如果是，则从无限滚动中删除距离并立即检查
在您的控制器中，删除调用 api
并在你的成功回调中广播这两个事件
- $scope.$broadcast('scroll.infiniteScrollComplete');
- $scope.$broadcast('scroll.resize');

Answer 2

您应该在 DataLoader.get

的回调中广播 infiniteScrollComplete 事件

发生的事情是 Get 方法是同步的，因此您的数据会在事件触发后添加到列表中。

尝试将您的代码更改为此，它应该可以工作。

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);
  });

JSON 无限滚动响应

JSON Response with infinite scroll

infinite-scroll

angularjs

ionic-framework