16

https://www.youtube.com/watch?v=zlERo_JMGCw 29:38で Matthew Podwysocki イベントを見ていました。

ネットフリックスのスクロールをどのように解決したかを彼が説明しています。以前のデータがクリーンアップされ、さらに追加されると、ユーザーはスクロールしてさらにデータを取得します (ただし、スクロールバックすると、以前のデータが再び表示されます)。

同様のことをしたかったのですが、netflix のデモ コードを入手しました。

function getRowUpdates(row) {
  var scrolls = Rx.Observable.fromEvent(document, 'scroll');
  var rowVisibilities = 
    scrolls.throttle(50)
      .map(function(scrollEvent) {
        return row.isVisible(scrollEvent.offset);
      })
      .distinctUntilChanged();

  var rowShows = rowrowVisibilities.filter(function(v) {
    return v;
  });
  var rowHides = rowrowVisibilities.filter(function(v) {
    return !v;
  });

  return rowShows
    .flatMap(Rx.Observable.interval(10))
    .flatMap(function() {
      return row.getRowData().takeUntil(rowHides);
    })
    .toArray();
}

しかし、ここのスクロールに従って新しいデータまたはページデータを渡す方法について少し混乱しています。次のことを行う方法について誰かが少し説明できますか:

  • 最初のリストを取得します (私はそれを行うことができます)
  • ユーザーが下にスクロールすると、さらにリストを取得します (ページングの次のページを使用)
  • 以前にフェッチしたデータをメモリから削除し、要求に応じて再フェッチします (上にスクロール)。
4

1 に答える 1

2

一般的な行でそれを行う方法は次のとおりです。これで満足していただけるようでしたら、編集して詳細を追加します。

バージョン 2 : (最初のものについては、編集の変更を参照してください)

敷地内 ：

  1. 動的リストを含むタグは「ゾーン」と呼ばれます。
  2. リストの各行は、何でも含むことができる別の DIV に含まれます。
  3. ページは、ゾーンをカバーするのに十分な行です。
  4. 3 つの JavaScript「定数」: numberOfLinesOnFirstLoad、numberOfLinesOnPageLoad、numberOfLinesToLoadAfter
  5. 必要なデータを保持する JavaScript 変数: rows[ページ番号]、heights[ページ番号]、currentPageNumber = 1、maxPageNumber = 0
  6. page# : # はページ番号です
  7. rows[page#] には、実際の DOM オブジェクトではなく、データベースからそれらを取得する方法が含まれます。

ステップ/イベント:

  1. ゾーン タグを追加します。
  2. numberOfLinesOnFirstLoad 行を読み込みます。
  3. 行の合計高さが下位ゾーンの高さの 3 倍の場合、numberOfLinesToLoadAfter 行をロードします。行が追加された場合は手順 3 を繰り返し、それ以外の場合は手順 4 に進みます。
  4. 最大ページ数 +=1。ゾーンを完全に埋める次の行を見つけます。それらの行をrows["page" + maxPageNumber]に（配列として）追加します。それらの高さを計算し、heights["page" + maxPageNumber] に追加します。
  5. 行がなくなるまで手順 4 を繰り返し、手順 6 に進みます。
  6. 下にスクロールして page1 (つまり、rows["page1"] の最後の要素) が表示されない場合は、下に別のページを追加します: page4.
  7. maxPageNumber += 1. numberOfLinesOnPageLoad 行をロードします。
  8. 新しい行の合計高さが下位ゾーンの高さである場合、numberOfLinesToLoadAfter 行。行が追加された場合は手順 8 を繰り返します。それ以外の場合は、新しい行の高さの合計を heights["page" + maxPageNumber] に入れ、新しい行を配列として rows["page" + maxPageNumber] に入れ、これを入力した後に手順に進みます (つまり、9または 11)。
  9. 引き続き下にスクロールし、page2 が表示されない場合は、page1 要素を DOM から削除し、page1.height (heights["page1"]) を削除してスクロール位置を調整します。
  10. ページ 5 をロードします (ステップ 7 および 8)。
  11. これで、page2 と page5 が表示されないゾーンに page2 から page5 があります。page3 が完全に表示されている場合、page4 は表示されていません。それ以外の場合は、page3 と page4 の一部が表示されます。（可能性を示すだけですが、重要ではありません）
  12. 上にスクロールして page2 が表示され始めたら (つまり、rows["page2"] の最後の要素)、rows["page1"] を使用して page1 を読み込み、スクロール位置に page1.height (heights["page1"]) を追加し、 DOM から page5 を削除します。ここで、変数 rows && heights および maxPageNumber -= 1 からそれを削除することができますが、このページのリロードが 1 つのプロセスで行われるようにそれらを保持することもできます (したがって、ページをロードすると、それらの変数にページ定義が既に存在するかどうかを確認することになります)。 ）。
于 2016-03-29T05:59:56.617 に答える