如何处理无限滚动的新数据添加DOM

Question

我有一个问题，我认为我需要一些专家建议。 我有一个无限可滚动的div，它由一个列表加载，每次10个。如果列表中没有更改，一切正常。

我有一个新的项预先考虑该列表，因此扰乱了显示的内容无限滚动即最后一个项目的序列被重复的形式。

如果有人能告诉我如何处理这种情况，我会很感激。 我试图做的事情，

1. 拼接已显示内容中的最后一项。 （模糊的方式，如果列表与多个项目前置不会有用）的多少项目预先计划
2. 饲养跟踪和传递skip = <number_of_prepended_items>参数服务器跳过这些新添加的项目（工作正常，但我觉得它会打破）
3. 重新加载前10项添加新项目。

有什么建议？

Answer 1

每个项目可能有一些值表示顺序。当更多商品被添加时，订单会增加。您的无限滚动可以通过每次检索的项目数来减少最大订单数量。例如：

[ { order: 12, title: "something", body: "...text..." }, { order: 11, title: "whatever", [...snip...] } ]

当一个新项目被添加，它会为了13

如果有人已经滚动，页面就会知道最低的文章的顺序，并且获取下一个批次甚至更低。

请注意：我本来想说“ID”，而不是命令，但我不知道你用的是什么样的后端。

Answer 2

哈利Pehkonen说，你可以，例如，给每个项目id值，为每个新元素增加一个。然后你可以从服务器请求一个特定ID之后的前10个项目，在你的情况下，这是页面上最低的ID（字面上）。这会给你前10个你没有的东西，并防止重复。