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

时间:2016-11-12 23:09:21

标签: infinite-scroll

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

我有一个表格,它在列表前面添加一个新项目,因此会扰乱无限滚动的顺序,即重复显示内容中的最后一项。

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

  1. 拼接已显示内容中的最后一项。 (模糊的方式,如果列表前面有多个项目,则无用)
  2. 跟踪前面有多少项并将skip = <number_of_prepended_items>参数传递给服务器以跳过这些新添加的项目(工作正常,但我觉得它会破坏)
  3. 添加新项目后重新加载前10个项目。
  4. 有什么建议吗?

2 个答案:

答案 0 :(得分:0)

每个项目都可以有一些表示订单的值。添加更多项目后,订单会增加。您的无限滚动可以通过每次检索的项目数量来减少最大顺序。例如:

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

添加新商品时,订单将为13。

如果有人已经滚动,页面会知道最低文章的顺序,并获取更低的下一批。

请注意:我打算说“id”而不是订单,但我不知道你使用的是什么类型的后端。

答案 1 :(得分:0)

正如Harry Pehkonen所说,例如,你可以给每个项目一个#include <iostream> #include <string> using namespace std; class StudentGrades { private: string studentInfo[23]; public: void setStudentInfo(string info) { for (int i = 0; i < 23; ++i) { studentInfo[i] = info; } } string getStudentInfo() { for (int i = 0; i < 23; ++i) { cout << studentInfo[i] << " "; } } }; int main() { StudentGrades student1; student1.setStudentInfo("Bob"); student1.getStudentInfo(); } 值,每增加一个新元素就增加一个值。然后,您可以在服务器的某个ID之后请求前10个项目,在您的情况下,它是页面上的最低ID(字面意思)。这将为您提供您没有的前10个项目,并防止重复。