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

Question

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

我想获取该数组，只显示屏幕上可见的内容并隐藏其他所有内容，但用户向下滚动将显示其他行并隐藏以前的内容。

这有点复杂，我在观看RxJS视频和Netflix做了类似的事情。我不确定使用什么函数来产生这种效果。

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

我们的代码：

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

Answer 1

我已经写了一对夫妇的文章（如this one），并就如何做到这一点的“虚拟滚动事”的各种演示，但基本上你需要的是静态行高或能够确定给定的行是否在屏幕上可见（Row#isRowVisible在您链接的要点中）。

然后，显示行之后最简单的方法是将它们绝对定位，以便将索引乘以静态行高或计算行应以何种方式显示的位置。

This是如何做到这一点的反应的相当粗糙的演示，但这些想法都非常相似（你也许可以把刚才复制粘贴的RxJS代码或我Cycle.js例子）。尽管如此，我鼓励你自己尝试。

此外，500个项目真的不应该成为angular2的一个问题（它真的很快），除非你在每一行有很多元素。