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：（对于第一个版本，请参阅编辑更改）

场所：

包含动态列表的标签将被称为 "the zone"。
列表的每一行都将包含在另一个 DIV 中，后者可以包含任何内容。
一页足以覆盖区域。
三个 javascript "constants" : numberOfLinesOnFirstLoad, numberOfLinesOnPageLoad, numberOfLinesToLoadAfter
JavaScript 保存所需数据的变量：rows[page#]、heights[page#]、currentPageNumber = 1、maxPageNumber = 0
page# : # 是页码
rows[page#] 应包含一种从数据库中取回它们的方法，而不是真正的 DOM 对象。

步骤/事件：

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

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

RxJS Polling for row updates on infinite scroll

javascript

scroll

xmlhttprequest

rxjs

rxjs5