javascript - 如何结合 ionic 刷新器和 ionic 无限滚动？

到目前为止，我有这个，而且效果很差，每次我到页面底部时，它都会重新加载并将我扔回顶部

  <ion-content>
    <ion-refresher
      on-refresh="doRefresh()">
    </ion-refresher>
    <div ng-repeat="post in posts">
      <a ng-href="#/tabs/news/{{post.site_ID}}/{{post.ID}}">
        <h2 ng-bind-html="post.title"></h2>
        <p>{{:: post.date | date}}</p>
      </a>
    </div>
    <ion-infinite-scroll
            on-infinite="loadMore()"
            distance="1%">
     </ion-infinite-scroll>
  </ion-content>

和 Controller

.controller('NewsCtrl', function($scope, $ionicLoading,
                                 $stateParams, FreshlyPressed) {

  $scope.posts = [];

  $scope.loadMore = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  },

  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();

});

最佳答案

看起来问题在于您在实际完成之前广播 infinteScrollComplete 和 refreshComplete 。这些似乎是异步请求，但您的响应好像它们是同步的。

这是真正发生的事情:

$scope.posts = FreshlyPress.getBlogs($scope); // call goes out
$scope.$broadcast(etc); // call is still out, this is too early

// (call comes back at a variable time, $broadcast needs to occur at that time)

要处理此问题，您需要回调或 promise ，具体取决于 getBlogs 函数的 api。看起来 getBlogs 正在做一些魔术，要么在内部将其结果添加到 $scope 中，要么返回一个空数组/对象，然后在结果出现时填充它。无论哪种方式，这都违反了单一职责原则。 getBlogs 应该只在回调/ promise 中返回数据，并让 Controller 决定处理该数据。

var limit = 10; // max results
var offset = 0; // starting index
$scope.posts = []; // add results here as they come in
$scope.loadMore = function() {
  FreshlyPressed.getBlogs(limit, offset).then(function(results) {
    $scope.posts = $scope.posts.concat(results); // add results
    offset = $scope.posts.length; // adjust offset for next query
    $scope.$broadcast('scroll.infiniteScrollComplete');
  });
}; // <-- you also had a comma here

对于刷新，您只需重置状态:

$scope.posts = []; // empty results
offset = 0; // start back at first post

现在您可以像以前一样加载更多帖子。

关于javascript - 如何结合 ionic 刷新器和 ionic 无限滚动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30180862/