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

步骤/事件：

1. 添加区域标签。
2. 加载 numberOfLinesOnFirstLoad 行。
3. 如果总行高次区域高度乘以三，则加载 numberOfLinesToLoadAfter 行。如果添加了行，则重复第 3 步，否则继续第 4 步。
4. maxPageNumber +=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 不可见，则从 DOM 中移除 page1 元素并通过移除 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 中删除它，但您也可以保留它们，以便在一个进程中完成重新加载此页面（因此加载页面意味着检查页面定义是否已存在于这些变量中)。