javascript – 复杂的RxJS迭代器只有可见的行

我们在每个请求的列表中有超过500行,有时它是10行,有时它是巨大的.

我想获取该数组并仅显示屏幕上可见的内容并隐藏其他内容,但如果用户向下滚动它将显示其他行并隐藏以前的行.

这有点复杂,我正在观看RxJS视频和Netflix类似.我不确定使用什么函数来产生这种效果.

https://gist.github.com/iBasit/8ceef1db9de945a37559 Netflix示例.

我们的代码:

Observable.fromArray([0,1,2,.....500]).subscribe(row => show(row));

最佳答案 我写了几篇文章(如
this one)以及关于如何做这个“虚拟滚动事物”的各种演示,但基本上你需要的是静态行高或能否确定给定行是否在屏幕上可见(在您链接的那个要点中,行#isRowVisible).

那么之后显示行的最简单方法是绝对定位它们,使得您可以将索引乘以静态行高或计算行应以某种方式显示的位置.

This是一个非常粗略的演示,说明如何在React中执行此操作,但这些想法非常相似(您可能只需复制粘贴RxJS代码或我的Cycle.js示例).我鼓励你尝试自己做.

另外,对于angular2来说,500项真的不应该是一个很大的问题(它真的很快),除非你每行都有大量的元素.

点赞