16

我在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();
}

但是我对如何根据此处的滚动传递新数据或页面数据感到有些困惑。有人可以对我如何执行以下操作给出一点解释：

  • 获取第一个列表（我可以这样做）
  • 当用户向下滚动时获取更多列表（使用分页下一页）
  • 从内存中删除以前获取的数据，并根据请求重新获取（向上滚动）。
4

1 回答 1

2

这是我在一般情况下的做法。如果这似乎让您满意，我将编辑并添加更多详细信息。

第 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 中删除它，但您也可以保留它们，以便在一个进程中完成重新加载此页面（因此加载页面意味着检查页面定义是否已存在于这些变量中）。
于 2016-03-29T05:59:56.617 回答