Javascript 复杂RxJS迭代器仅可见行

Javascript 复杂RxJS迭代器仅可见行,javascript,scroll,angular,rxjs,rxjs5,Javascript,Scroll,Angular,Rxjs,Rxjs5,我们在每个请求的列表中有500多行,有时是10行,有时是巨大的 我想拿那个数组,只显示屏幕上可见的内容,隐藏其他所有内容,但让用户向下滚动,它将显示其他行并隐藏以前的行 这有点复杂,我在看RxJS视频,Netflix也做了类似的事情。我不确定使用什么函数来产生这种效果 Netflix就是一个例子 我们的守则: Observable.fromArray([0,1,2,.....500]).subscribe(row => show(row)); 我已经写了几篇文章(比如)和各种演示如何实现

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

我想拿那个数组,只显示屏幕上可见的内容,隐藏其他所有内容,但让用户向下滚动,它将显示其他行并隐藏以前的行

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

Netflix就是一个例子

我们的守则:

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

我已经写了几篇文章(比如)和各种演示如何实现“虚拟滚动”,但基本上您需要的是静态行高或确定给定行在屏幕上是否可见的能力(在您链接的要点中,
row\isRowVisible

之后显示行的最简单方法是绝对定位它们,这样您可以将索引乘以静态行高,或者计算行应该显示的位置

这是一个关于如何在React中实现这一点的非常粗略的演示,但其思想非常相似(您可以从该示例或我的Cycle.js示例中复制粘贴RxJS代码)。不过我鼓励你自己动手做


另外,500个项目对angular2来说应该不是什么大问题(它真的很快),除非每行有大量元素。

您需要类似的东西。我还没有看到Angular2的任何东西(这并不意味着什么,我从大约1,5个月开始使用它)。从api获取250个项目花费了非常快的时间(不到一秒),但随后它开始解析需要5秒或更长的时间,除非我减少到
take(20)
然后在一两秒钟内显示。如果我不知道我的行高,或者如果每次的行高都不同,该怎么办?像某些地方一样,行高将为100px,有时为500px。。或者有时候只是一行20px。我如何计算这类行?如果您的行没有静态维度,那么没有任何方法可以帮助您。我们不能动态获取高度吗<代码>$(div).height()这样不行吗?