Ionic/AngularJS无限滚动无需调用加载更多

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>

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

Ionic/AngularJS无限滚动无需调用加载更多

Ionic/AngularJS Infinite scroll without call load more

angularjs

ionic-framework

angularjs-ng-repeat

infinite-scroll