Есть большой родительский div. В нем около 130 строк. это тоже дивы. Но вот строятся они оч долго, т.к. в каждой строчке куча ячеек и в ячейке куча данных. примерно 5-7 секунд. Но по идее те что не видны сейчас на экране мне не надо строить. Я думаю большая часть времени тратиться на них. На экране видны около 20 строк. Я тестировал если я уберу оставлю только строки на высоту экрана - около секунды отрисовка. Вопрос. Как мне сделать так. чтобы строки показывались вставлялись в div только по мере прокрутки родительского дива. Тоесть я кручу список вниз. Верхние строки которые скрылись из вида исчезают из dom. А нижние, до которых дошла прокрутка начинают вставляться в dom. Надеюсь выразился правильно.
Я попробую упрощенный пример сделать, чтобы показать. ПРИМЕР:
https://codepen.io/aniqi/pen/wvyzKJK
script#rows(type="x/template")
.rows
//- вот эту строку выводитьтолько если дошли до нее
.row(v-for="r in allItems")
.col {{ r.text }}
.col(v-for="c in r.sub") {{ c }}
#app.test
rows
я тут сделал 10 000 строк, чтобы сделать ожидание около 7 секунд. А если делаю 100 строк то мгновенно отрисовывает.
Как сделать так, чтобы он в зависимости от позиции прокрутки. рисовал только видимые строчки. Тоесть не рисовал, а вставлял в dom дерево.