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. 最大页数 +=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 中删除，但您也可以保留它们，以便在一个进程中完成重新加载此页面（因此加载页面意味着检查这些变量中是否已存在页面定义） ）。