RxJS輪詢行更新的無限滾動

Question

我在https://www.youtube.com/watch?v=zlERo_JMGCw 29:38

看着馬修Podwysocki事件在那裏，他解釋它們是如何解決的Netflix的滾動。用戶滾動更多的數據，因爲之前的數據被清理並且更加累加（但是回滾顯示先前的數據）。

我想做的事相似，但我抓住了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(); 
} 

但我對如何根據這裏滾動通過新的數據或頁面數據有點糊塗..有人可以給小我如何能做到下面的解釋：

• 取第一個列表（我能做到這一點）
• 獲取更多列表，用戶向下滾動（使用分頁下頁）
• 重將先前獲取的數據從內存中移出，並根據請求重新提取（向上滾動）。

Answer 1

下面是我將如何在一般線條中做到這一點。如果這似乎讓你滿意，我會編輯並添加更多細節。

版本2：（對於第一個，看編輯的變化）

物業：

1. 包含動態列表中的標籤將被稱爲 「區」。
2. 列表中的每一行都將包含在另一個可以包含任何內容的DIV中。
3. 一頁足夠覆蓋該區域。
4. 三的javascript 「常量」：numberOfLinesOnFirstLoad，numberOfLinesOnPageLoad，numberOfLinesToLoadAfter
5. 的JavaScript變量來保存所需的數據：行[頁＃]，高度[頁＃]，currentPageNumber = 1，maxPageNumber = 0
6. 頁＃：＃是頁碼
7. rows [page＃]應該包含一個從數據庫中取回它們的方法，而不是真正的DOM對象。

步驟/活動：

1. 添加區域標記。
2. 加載numberOfLinesOnFirstLoad行。
3. 如果總行高度低於區域高度乘以3，則加載numberOfLinesToLoadAfter行。如果添加行，請重複步驟3，否則繼續執行步驟4.
4. maxPageNumber + = 1。找到完整填充區域的下一行。將這些行添加到行[「page」+ maxPageNumber]（作爲數組）。計算這些高度並將其添加到高度[「page」+ maxPageNumber]。直到沒有更多的行，然後
5. 重複步驟4繼續執行步驟6。
6. 當向下滾動和第1頁（這意味着行的最後一個元素[「第1頁」）是不可見的，添加另一個下面：第4頁。
7. maxPageNumber + = 1.加載numberOfLinesOnPageLoad行。
8. 如果總的新行高度低於區域高度，則numberOfLinesToLoadAfter行。如果添加了行，請重複步驟8，否則在高度[「page」+ maxPageNumber]中將新的行高放到行中[[page] + maxPageNumber]，然後繼續執行步驟（所以9或11）。
9. 儘管如此向下滾動，如果第2頁是不可見的，刪除DOM中第1頁的元件以及通過去除page1.height（高度[「第1頁」]）調整滾動位置。
10. 加載第5頁（第7步和第8步）。
11. 現在，頁面2和頁面5不可見的區域中存在頁面2到頁面5。如果頁面3完全可見，則不是頁面4，否則會看到頁面3和頁面4的一部分。 （只是爲了表示可能性，但並不重要）
12. 當滾動起來，第2頁開始是可見的（行，以便最後一個元素[「第2頁」]），通過使用行負荷第1頁[「第1頁」]，加上第1頁。高度（高度[「page1」]）滾動位置並從DOM中刪除page5。在這裏，你可以從變量行刪除& &高度和maxPageNumber - = 1，但你也可以保留它們，這樣重裝這個頁面在一個進程（所以加載頁面將意味着，以檢查是否頁面定義在那些已經存在做變量）。