Question

我有无限滚动功能的麻烦。每当我向下滚动loadMore函数调用两次，每次加载2页而不是1页。在日志中，我看到加载2和3页：

loadMore 4
loadMore 5

然后加载4页和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);

  };

})

这是我的控制器：

<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>

如何调用loadMore一次？这是我的模板：

Error:incompatible types: DeviceCheckCallback is not a functional interface
    multiple non-overriding abstract methods found in interface DeviceCheckCallback

Answer 1

您应该在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);
  });

Answer 2

我也遇到过这个问题。以下是我用来解决它的一些提示

取下离子清新剂，看它是否只调用一次
如果是，则删除距离并从无限滚动中立即检查
在您的控制器中，在调用api
并在成功回调中播放这两个事件
- $ $范围广播。（＆＃39; scroll.infiniteScrollComplete＆＃39）;
- $ $范围广播（＆＃39; scroll.resize＆＃39）;

带有无限滚动的JSON响应

2 个答案: