javascript - 实时数据无限滚动

Question

我正在尝试在 Web 应用程序中实现无限滚动，可以从服务器添加或删除记录，按其 ID 的字母顺序排序，相关数据也可以随时更改，我必须显示最新数据.我了解无限滚动的工作原理以及如何显示一组固定对象的最新数据(在我的例子中，反复轮询并将数据转储到 View 中)，但我无法理解如何将两者集成。 API 使用游标，每次向我发送 20 条记录。请帮忙

Answer 1

我想我明白你最关心的是什么。具有实时更新的无限滚动很难实现。您必须仔细考虑并弄清楚您真正想要实现的目标。有几种情况需要考虑，为简化起见，假设我们使用带有行的网格:

1. 可见行已更改(编辑)
2. 在可见行之间添加了新行 (add)
3. 现有行已从可见行中删除(删除)
4. 加载的行已更改(编辑)
5. 在先前加载的行之间添加了一个新行，但它们不可见 - 我们向下滚动(添加)
6. 现有行已从加载的行中删除(删除)
7. 未加载行的任何更改都是微不足道的 - 因为我们仍然需要加载它

我认为这里最大的问题是对已加载但不可见的行进行操作。所做的任何更改对用户都是不可见的。既然如此，你考虑过虚拟滚动吗？所以只显示 10 行并在用户向上/向下滚动时替换它们。如果你真的想要无限滚动，好的方法是通知用户数据已经改变，你必须重新渲染整个无限滚动。在这种情况下，用户决定刷新已加载的数据。您可以捕获可见的内容并尝试计算向他显示的内容(以反射(reflect)添加/删除/编辑行的先前状态)