vuejs как организовать ленивое отображение блоков

Question

Есть большой родительский 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 дерево.

Answer 1

Вобщем потыкался я и похоже сделал сам =)

определяю текущую позицию прокрутки.
При выводе элемента проверяю v-if, чтобы он был в видимой зоне.

Итог, скорость отображения возросла в разы.

рабочий код тут

https://codepen.io/aniqi/pen/wvyzKJK

script#rows(type="x/template")
  .rows-wrap
    .scroll {{ scroll }} <br> {{ height }} <br> {{ start }}  <br> {{ end }}
    .rows#box
      //- вот эту строку выводить только если дошли до нее  
      .row(v-for="r in allItems" :key="r.id" @scroll=getscroll ref="rows" )
        .inner(v-if="r.id>=start && r.id<=end")
          .col {{ r.scroll }}
          .col(v-for="c in r.sub") {{ c }}

#app.test
  rows

БЛОГ НА HUSL

vuejs как организовать ленивое отображение блоков

Ответы (1 шт):