無限スクロール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

Harry Pehkonen氏によると、たとえば、各項目にidという値を付けて、新しい要素ごとに1ずつ増やすことができます。その後、サーバーから特定のIDの後の最初の10個のアイテムを要求できます。その場合は、ページ上の最も低いIDです（文字通り）。それはあなたが持っていない最初の10項目を提供し、重複を防止します。