无限滚动上行更新的RxJS轮询
无限滚动上行更新的RxJS轮询
提问于 2016-02-21 09:14:54
我在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();
}但我对如何根据此处的滚动条传递新数据或页面数据感到有点困惑。有没有人可以解释一下我是如何做到以下几点的：
- fetch first list (我可以这样做)
- fetch more list as user scroll (使用翻页到下一页)
- 从内存中删除以前提取的数据，并根据请求重新获取(向上滚动)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-29 13:59:57
下面是我将如何在一般的代码行中这样做。如果这似乎让你满意，我将编辑并添加更多细节。
版本2：(有关第一个版本，请参阅编辑更改)
前提：
numberOfLinesToLoadAfter
- JavaScript包含动态列表的标记将被称为“区域”。number
- rowspage#
- 列表的每一行都将包含在另一个可以包含任何内容的DIV中。
- 一页足以覆盖该区域。
- 三个javascript“常量”：用于保存所需数据的numberOfLinesOnFirstLoad、numberOfLinesOnPageLoad、numberOfLinesOnPageLoad变量: rowspage#，heightspage#，currentPageNumber = 1，maxPageNumber = 0
- page #：#是页面number
- rowspage#应包含一种从数据库中取回数据的方法，而不是真正的DOM对象。
步骤/事件：
- 添加区域标记。
- 加载numberOfLinesOnFirstLoad行。
- 如果总行数高度低于区域高度乘以3，则加载numberOfLinesToLoadAfter行。如果添加了行，请重复步骤3，否则继续执行步骤4.
- maxPageNumber +=1。查找填充区域的下一行。将这些行添加到行"page" + maxPageNumber。计算这些元素的高度，并将其添加到height“page”+ maxPageNumber.
- Repeat步骤4中，直到没有更多的行，然后继续到步骤6。
- 当向下滚动且page1 (表示行的最后一个元素“page1”)不可见时，在下面添加另一个元素: page4。
- maxPageNumber += 1.加载numberOfLinesOnPageLoad行。
- 如果新行的总高度低于区域高度，则为numberOfLinesToLoadAfter行。如果添加了行，请重复步骤8，否则将新行的总高度放在高度“page”+ maxPageNumber中，并将新行作为数组放入行“page”+ maxPageNumber中，并在输入此行后继续执行此步骤(因此可以选择9或11)。
- 仍在向下滚动，如果看不到page2，请从DOM中删除page1元素，并通过删除page1.height (heights"page1")来调整滚动位置。
- 加载第5页(步骤7和8)。
- 现在，在看不到page2和page5的区域中有page2 to page5。如果page3完全可见，则page4不可见，否则page3和page4的一部分可见。(只是为了表明可能性，但不是important)
- When向上滚动并且page2开始可见(所以行的最后一个元素“page2”)，使用行“page1”加载page1，添加page1.height (高度“page1”)到滚动位置，并从DOM中删除page5。在这里，您可以将其从变量
&& heights和maxPageNumber -= 1中删除，但也可以保留它们，以便在一个进程中完成重新加载此页面(因此，加载页面将意味着检查这些变量中是否已存在页面定义)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35531128
复制相关文章
相似问题