Question

我希望实现一个无限滚动，但每次都不需要调用加载更多功能。

我们认为我已经从Parse下载了1000个项目的数组。我想显示10个项目，然后使用本地数组中的ng-repeat将更多和更多项目添加到我的列表中。

我认为最好的解决方案是实现一个指令，但也许已经做了一些事情......

任何？

Answer 1

当然，您可以将其作为指令，但无论如何，您将需要某种loadMore功能。换句话说，您将需要检测用户何时滚动到特定位置，并执行一些更新功能。

虽然您自己的指令可能更好地封装您的特定要求，但您可以使用任何其他当前无限滚动插件实现您想要的。只需在模型中保留两个版本的阵列即可。一个是数据，另一个是用户看到的数据。如果您的数组是对象，那么两者都应该能够处理相同的项目。

例如：

var data = [...];
var position = 0;
var pageSize = 10;
$scope.viewable = [];

$scope.loadMore = function(){
    $scope.viewable = $scope.viewable.concat(data.slice(position, position + pageSize));
    position += pageSize;
};

更新

如果您需要经常实现这一点，但又不想实现自己的滚动相关指令，则可以将上述想法封装在管理多版本化数组的工厂中。您仍然必须挂钩loadMore并设置多版本，但您的控制器和视图代码将如下所示：

// the data you loaded somewhere
var data = [...];
$scope.specialArray = PageableArrayFactory.create(data);

// then in your html
ng-repeat="item in specialArray.viewItems"
// where you put your infinite scroll
infinite-scroll="specialArray.loadMore()"

PageableArrayFactory只需要是一个接收大数据数组的工厂，并像我的初始示例一样跟踪可查看的副本数组。实现起来应该不会太难，然后可以在加载数据后在任何控制器中使用一行代码重复使用。

另一个例子：

您还可以在$index上构建自定义过滤器（或使用ng-show/if），以便ng-repeat仅显示您想要的项目。如果你想使用现有的无限卷轴代码，你仍然需要挂钩loadMore()，这意味着你仍然需要我工厂的例子。

Answer 2

Matt的解决方案非常好。特别是考虑到您已经提到过要使用ng-repeat，并且想要对结果进行分页。

实施他的建议并不是一件巨大的努力。另一种选择是使用collection-repeat，尤其是performances。

实施非常简单：

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

并且您不必担心将所有项目加载在一起，因为框架将负责为您加载大量信息。唯一的缺点 - 据我所知 - 你无法控制你想要显示的项目数量。

离子/ AngularJS无限滚动没有更多的呼叫负载

2 个答案: