52

所以我正在尝试使用 AngularJS 创建一个无限滚动表，类似于：http: //jsfiddle.net/vojtajina/U7Bz9/

我遇到的问题是，在 jsfiddle 示例中，如果我继续滚动直到获得一百万个结果，浏览器会慢到爬行，不是吗？因为现在 $scope.items 中会有1,000,000结果。例如，如果我只1000在 $scope.items 内有一次结果，而我正在查看的结果恰好在这些1000.

示例用例：页面加载，我看到了第一个10结果（超出1,000,000）。即使我只看到10，第一个1000结果实际上已加载。然后我滚动到列表的最底部以查看最后的10项目。如果我再次向上滚动到顶部，我希望10必须从服务器再次加载顶部结果。

我有一个使用 ExtJS 完成的项目，情况类似：一个包含数千个结果的无限滚动列表。ExtJS 处理这个问题的方法是加载当前页面的结果，然后预加载几个额外的结果页面。然而，在任何时候，只有10一页页的结果存储在本地。

所以我想我的问题是我将如何在 AngularJS 中实现它？我知道我没有提供太多代码，所以我不希望人们只给出编码的答案，但至少给出一些方向的建议。

4

6 回答 6

47

A couple of things:

  1. "Infinite scrolling" to "1,000,000" rows is likely to have issues regardless of the framework, just because you've created millions and millions of DOM nodes (presuming you have more than one element in each record)

  2. The implementation you're looking at doing with <li ng-repeat="item in items">{{item.foo}}</li> or anything like that will have issues very quickly for one big reason: {{item.foo}}} or any ngBind like that will set up a $watch on that field, which creates a lot of overhead in the form of function references, etc. So while 10,000 small objects in an "array" isn't going to be that bad... 10,000-20,000 additional function references for each of those 10,000 items will be.

What you'd want to do in this case would be create a directive that handles the adding and removing of DOM elements that are "too far" out of view as well as keeping the data up to date. That should mitigate most performance issues you might have.

... good infinite scrolling isn't simple, I'm sorry to say.

于 2013-01-11T18:54:07.823 回答
26

我喜欢angular-ui实现ui-scroll ...

https://github.com/angular-ui/ui-scroll

...在 ngInfiniteScroll 上。ui-scroll 与标准无限滚动的主要区别在于，在离开视口时会删除先前的元素。

从他们的自述文件...

向用户呈现未定义长度的数据元素列表的常用方法是从列表顶部的一小部分开始 - 刚好足以填满页面上的空间。当用户向下滚动列表时，额外的行会附加到列表的底部。

这种方法的问题在于，即使列表顶部的行在滚动出视图时变得不可见，它们仍然是页面的一部分并且仍然消耗资源。随着用户向下滚动，列表会增长，网络应用程序会变慢。

如果代表一行的 html 附加了事件处理程序和/或角度观察程序，这将成为一个真正的问题。一个平均复杂度的 Web 应用程序可以轻松地每行引入 20 个观察者。对于 100 行的列表，您总共有 2000 个观察者和一个缓慢的应用程序。

此外，积极维护 ui-scroll。

于 2015-10-08T18:19:26.523 回答
17

似乎http://kamilkp.github.io/angular-vs-repeat将是您正在寻找的。它是一个虚拟滚动指令。

于 2014-09-26T06:18:27.707 回答
8

事实证明，AngularJS 的ng-grid模块几乎完全符合我的需要。如果您查看示例页面，服务器端处理示例也是一个无限滚动列表，仅加载需要的数据。

感谢那些无论如何评论和回答的人。

最新网址：ng-grid

于 2013-01-14T15:15:35.183 回答
6

您可以尝试使用 ng-infinite-scroll ：

http://binarymuse.github.io/ngInfiniteScroll/

于 2013-12-16T05:45:20.517 回答
2

从 Angular Material查看virtualRepeat

它实现了对视口区域中可见行的动态重用，就像 ui-scroll

于 2016-12-16T17:46:26.837 回答