javascript - RxJS 轮询无限滚动时的行更新

Question

我在 https://www.youtube.com/watch?v=zlERo_JMGCw 上观看 Matthew Podwysocki 事件29:38

他解释了他们如何解决 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 中，该 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(这意味着行 ["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 中删除，但您也可以保留它们以便在一个进程中完成重新加载此页面(因此加载页面将意味着检查这些变量中是否已存在页面定义).