复杂的 RxJS 迭代器仅可见行

Complex RxJS iterator only visible rows

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

我想使用该数组,只显示屏幕上可见的内容并隐藏其他所有内容,但如果用户向下滚动,它将显示其他行并隐藏之前的行。

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

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

我们的代码:

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

我已经写了几篇文章(比如 this one)和各种关于如何执行此操作的演示 "virtual scrolling thing",但基本上您需要的是静态行高或确定行高的能力给定的行将在屏幕上可见(Row#isRowVisible 在您链接的要点中)。

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

This 是一个关于如何在 React 中执行此操作的非常粗略的演示,但想法非常相似(您可以从那个或我的 Cycle.js 复制粘贴 RxJS 代码例子)。不过,我鼓励您尝试自己制作。

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