Vue-better-scroller

Это компонент, основанный на библиотеке better-scroll.js, которая уже встроена и не требует отдельной установки. Он предоставляет функции прокрутки, бесконечной загрузки по запросу при достижении верхней границы окна и обновления данных при достижении нижней границы для Vue.js.

Компонент использует язык программирования ES6 и среду разработки Vue CLI 3.

Особенности:

• Благодаря использованию библиотеки better-scroll и её способности ускорять прокрутку с помощью CSS3 transform3d, прокрутка работает плавно даже при большом объёме данных.
• Использование CSS3 calc позволяет избежать проблем с высотой, которые могут возникнуть при использовании native better-scroll.
• Компонент старается минимизировать необходимость пользовательской настройки, предлагая постепенное добавление функций.

Установка: Для установки через NPM выполните команду:

$ npm install vue-better-scroller

Также можно вручную загрузить Common JS и UMD JS файлы и импортировать их.

Скомпилированные файлы JavaScript находятся в папке dist.

Использование: В файле main.js необходимо импортировать плагин и зарегистрировать его:

# main.js
import Scroll from "vue-better-scroller";
Vue.use(Scroll)

Затем в шаблоне HTML используйте компонент scroll:

<template>
  <scroll>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </scroll>
</template>

Документация: Документация по параметрам компонента:

Примеры использования:

1. Простая прокрутка без дополнительных функций:

<scroll :scrollbar="true">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</scroll>

2. Прокрутка с включением функций бесконечной загрузки и обновления:

<scroll :options="{ pullup: true, pulldown: true }" :ref="scroll">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</scroll>

После завершения бесконечной загрузки необходимо вызвать метод pullupEnd(), чтобы закрыть функцию бесконечной загрузки:

this.$refs.scroll.pullupEnd();

Эффект: К сожалению, не удалось найти демонстрационный код, но автор предоставил скриншоты, демонстрирующие работу компонента.