我们在每个请求的列表中有超过500行,有时它是10行,有时甚至是巨大的行。
我想获取该数组并仅显示屏幕上可见的内容并隐藏其他内容,但如果用户向下滚动则会显示其他行并隐藏上一行。
这有点复杂,我正在观看RxJS视频和Netflix做的类似。我不确定使用什么功能来起作用。
https://gist.github.com/iBasit/8ceef1db9de945a37559 Netflix示例。
我们的代码:
Observable.fromArray([0,1,2,.....500]).subscribe(row => show(row));
答案 0 :(得分:1)
我已经写了几篇文章(比如this one)和关于如何做这些的各种演示"虚拟滚动的东西",但基本上你需要的是静态行高或能够确定某个给定的行是否在屏幕上可见(您链接的那个要点中的Row#isRowVisible
)。
然后,之后显示行的最简单方法是绝对定位它们,使得您可以将索引乘以静态行高度或计算行应以某种方式显示的位置。
This是一个非常粗略的演示,说明如何在React中执行此操作,但这些想法非常相似(您可能只能从该或我的Cycle.js示例中复制粘贴RxJS代码)。我鼓励你尝试自己制作。
另外,对于angular2来说,500项真的不应该是一个问题(它真的很快),除非你每行都有大量的元素。