RxJS轮询无限滚动上的行更新?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (253)

我想做类似的事情,但我抓住了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();
}

但我有点困惑如何根据这里的滚动传递新的数据或页面数据..有人可以给我一点点解释我如何可以做到以下几点:

  • 获取第一个列表(我可以做到这一点)
  • 在用户向下滚动时使用更多列表(使用分页下一页)
  • 从内存中删除先前提取的数据,并根据请求重新提取(向上滚动)。
提问于
用户回答回答于

前提:

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

步骤/活动:

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

扫码关注云+社区

领取腾讯云代金券