Vue + Virtual-list как поймать событие scroll?

Добрый день Владмир!
Раньше подгружал данные с сервера за один раз в память, и отображал через virtual-list Framework7 v1.6 . Сейчас данных стало больше 4 тысяч элементов, это занимает трафик и долго отдает. Переписываем на Vue. Хочу подгрузить первые 200 элементов, потом если пользователь начинает пролистывать список, поймать это событие и хотел на заднем фоне обновлять доподгружать с сервера.
Infinity list не подходит, когда некоторые пользователи начинают, весь этот список просматривать, забивает DOM и начинает подтормаживать.
Пробовал текущие событие и сделать на них:

  • virtual:itembeforeinsert
  • virtual:itemsbeforeinsert
  • virtual:itemsafterinsert
  • virtual:beforeclear

Не получается их поймать. Даже глобальный
mounted() { document.addEventListener('virtual:itemsbeforeinsert', () => {})}
не помогает.

Пример (http://framework7.io/docs/virtual-list.html#examples) не ловит вышеуказанные события.
В какую сторону лучше смотреть?

Сейчас вдогонку мысль пришла. Объединить оба infinite scroll и virtual-list, первым поймать event scroll ? и потом заменить данные в virtual-list?

1 Like

Да, тут лучше и правильнее использовать virtual list + infinite scroll. Сам использовал подобную связку в одном из приложений для клиента

И когда новые данные подгрузились их лучше добавить через replaceAllItems метод

И если на самих элементах не нужна особая логика, то лучше использовать стандартный в VIrtual List DOM рендеринг. Просто если рендерить через Vue как в F7-Vue Kitchen Sink, то производительность будет похуже, но ее может быть достаточно, уже проверено

Не хватало вот этого метода. Спасибо.