Как убрать бесконечный скролл вниз при попытке создать виртуальный скролл?

Для того чтобы убрать бесконечный скролл вниз при попытке создать виртуальный скролл в Vue.js, существует несколько подходов. Один из них - использование плагина vue-virtual-scroll-list.

vue-virtual-scroll-list - это плагин, который предоставляет вам возможность создания виртуального скролла, который отображает только видимую часть списка, увеличивая производительность и уменьшая нагрузку на браузер.

Вот как вы можете использовать vue-virtual-scroll-list:

1. Установите плагин через npm:

npm install vue-virtual-scroll-list --save

2. Импортируйте компонент в нужном месте вашего кода:

import Vue from 'vue'
import VueVirtualScrollList from 'vue-virtual-scroll-list'

Vue.component('vue-virtual-scroll-list', VueVirtualScrollList)

3. Теперь вы можете использовать компонент в вашем шаблоне:

<template>
  <div>
    <vue-virtual-scroll-list :size="100" :remain="10">
      <div v-for="item in items" :key="item.id">
        {{ item.text }}
      </div>
    </vue-virtual-scroll-list>
  </div>
</template>

В приведенном выше примере размер блока виртуального скролла установлен на 100, что означает, что будет отображаться только 100 элементов списка. Оставшиеся 10 элементов загружаются по мере прокрутки.

Вы можете настроить параметры size и remain в соответствии с вашими потребностями. Параметр size определяет количество элементов списка, которые будут отображаться, и он будет приближен к ближайшему кратному числу, чтобы обеспечить оптимальную производительность. Параметр remain определяет количество элементов, которые будут загружаться по мере прокрутки.

Таким образом, используя плагин vue-virtual-scroll-list, вы можете создать виртуальный скролл, который эффективно обрабатывает большие списки без бесконечной прокрутки вниз.