RxJS轮询无限滚动的行更新

Question

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

看着Matthew 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. 包含动态列表的标签将被调用＆＃34;区域＆＃34;。
2. 列表的每一行都将包含在另一个可以包含任何内容的DIV中。
3. 页面足以覆盖区域。
4. 三个javascript＆＃34;常数＆＃34; ：numberOfLinesOnFirstLoad，numberOfLinesOnPageLoad，numberOfLinesToLoadAfter
5. 用于保存所需数据的JavaScript变量：rows [page＃]，high [page＃]，currentPageNumber = 1，maxPageNumber = 0
6. 页面＃：＃是页码
7. rows [page＃]应该包含一种从数据库中获取它们的方法，而不是真正的DOM对象。

步骤/事件：

1. 添加区域标记。
2. 加载numberOfLinesOnFirstLoad行。
3. 如果总行高度低于区域高度乘以3，则加载numberOfLinesToLoadAfter行。如果添加了行，请重复步骤3，否则继续执行步骤4.
4. maxPageNumber + = 1。找到完全填充区域的下一行。将这些行添加到行[＆＃34; page＆＃34; + maxPageNumber]（作为数组）。计算它们的高度并将其加到高处[＆＃34; page＆＃34; + maxPageNumber]。
5. 重复步骤4直到不再有行，然后继续执行步骤6.
6. 向下滚动时，page1（表示行的最后一个元素[＆＃34; page1＆＃34;]）不可见，请在下面添加另一个：page4。
7. maxPageNumber + = 1.加载numberOfLinesOnPageLoad行。
8. 如果总新行高度低于区域高度，则numberOfLinesToLoadAfter行。如果添加了行，则重复步骤8，否则将新行总高度设置为高度[＆＃34; page＆＃34; + maxPageNumber]和新行作为行中的数组[＆＃34; page＆＃34;输入这个步骤后继续执行步骤（所以9或11）。
9. 仍然向下滚动，如果第2页不可见，则从DOM中删除page1元素并通过删除page1.height（高度[＆＃34; page1＆＃34;]）调整滚动位置。
10. 加载第5页（步骤7和8）。
11. 现在，区域中有第2页到第5页，其中page2和page5不可见。如果page3完全可见，则不是page4，否则page3和page4的一部分是可见的。 （只是为了表明可能性，但并不重要）
12. 当向上滚动并且page2开始可见时（因此行的最后一个元素[＆＃34; page2＆＃34;]），使用行[＆＃34; page1＆＃34;]加载page1，添加page1。高度（高度[＆＃34; page1＆＃34;]）滚动位置并从DOM中删除page5。在这里，你可以从变量行＆amp;＆amp;中删除它。高度和maxPageNumber - = 1，但您也可以保留它们，以便在一个进程中重新加载此页面（因此加载页面意味着检查这些变量中是否已存在页面定义）。