Комплексный итератор 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 (это очень быстро), если у вас нет тонны элементов в каждой строке.