2

我正在尝试为我正在开发的从流星/mongo 集合中绘制对象的角度流星应用程序启用无限滚动。

我已经修改了 angular-meteor 教程的第 12 步，以便为我正在开发的应用程序使用分页，现在我想转换为无限滚动。为了我的目的，我一直在尝试调整教程中的代码和ngInfiniteScroll 中的这个示例。

我想我需要使用类似于教程的反应变量、自动运行等，但我真的不知道如何使其适应无限滚动。考虑下面的示例，我应该如何调整我的控制器以使用无限滚动，从数据库中绘制，并具有良好的生产角度流星实践？

演示 ngInfiniteScroll HTML：

  <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
  </div>

演示控制器内部的 ngInfiniteScroll 函数：

$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
  var last = $scope.images[$scope.images.length - 1];
  for(var i = 1; i <= 8; i++) {
    $scope.images.push(last + i);
  }
};

我在控制器中的角流星分页代码：

$scope.page = 1;
$scope.perPage = 1;
$scope.sort = {'_id': -1};
$scope.orderProperty = '1';

$scope.images = $meteor.collection(function() {
  return Images.find({}, {
    sort : $scope.getReactively('sort')
  });
});

$meteor.autorun($scope, function() {
  $meteor.subscribe('images', {
       limit: parseInt($scope.getReactively('perPage')),
       skip: (parseInt($scope.getReactively('page')) - 1) * parseInt($scope.getReactively('perPage')),
       sort: $scope.getReactively('sort')
     }).then(function(){
       $scope.imagesCount = $meteor.object(Counts ,'numberOfImages', false);        
  });
});

$scope.pageChanged = function(newPage) {
  $scope.page = newPage;
};
4

1 回答 1

2

请查看这个基本示例https://github.com/barbatus/ng-infinite-scroll。每次执行 onLoadMore 时，控制器都会重新订阅。

还有一个已部署的演示http://ng-infinite-scroll.meteor.com。

确保此时间angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 500)设置正确（不是非常小）以避免非常频繁的请求。

于 2015-07-26T18:12:08.880 回答