Давайте рассмотрим принцип прокрутки в браузере: каждый может видеть полосу прокрутки браузера. Когда высота содержимого страницы превышает высоту области просмотра, появляется вертикальная полоса прокрутки; когда ширина содержимого страницы превышает ширину области просмотра, появляется горизонтальная полоса прокрутки. То есть, когда область просмотра не может отобразить всё содержимое, браузер предлагает пользователю прокрутить экран с помощью полосы прокрутки, чтобы увидеть остальную часть содержимого.

Принцип работы BetterScroll такой же, как у браузера. Мы можем более наглядно это понять, используя картинку:

Зелёная часть — это оболочка, также известная как родительский контейнер, который имеет фиксированную высоту. Жёлтая часть — это контент, который является первым дочерним элементом родительского контейнера и высота которого будет увеличиваться с размером его содержимого. Затем, когда высота контента не превышает высоту родительского контейнера, контент не будет прокручиваться. Как только она превышена, контент можно прокручивать. Это принцип работы BetterScroll.

Плагины

Улучшите способность основной прокрутки BetterScroll с помощью плагинов, таких как:

import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'

let bs = new BScroll('.wrapper', {
  pullUpLoad: true
})

Подробности см. в разделе «Плагины» (https://better-scroll.github.io/docs/en-US/plugins/).

Использование BetterScroll с фреймворками MVVM

Я написал статью «Когда BetterScroll встречается с Vue» (на китайском языке). Я также надеюсь, что разработчики смогут внести свой вклад и поделиться опытом использования BetterScroll с другими фреймворками.

Фантастическая мобильная ui-библиотека, реализованная на Vue: cube-ui (https://github.com/didi/cube-ui/).

Вклад

Онлайн настройка одним кликом

Вы можете использовать Gitpod (онлайн-IDE с открытым исходным кодом, которая бесплатна для открытого исходного кода) для внесения вклада. Одним щелчком мыши он запустит рабочее пространство и автоматически:

• клонирует репозиторий better-scroll.
• установит все зависимости.
• запустит yarn vue:dev.
• запустит yarn docs:build и yarn docs:dev.

Использование BetterScroll в реальном проекте

Если вы хотите узнать, как использовать BetterScroll в реальном проекте, вы можете изучить два моих практических курса (на китайском языке).

Практический курс по имитации голодного выноса еды на вынос на основе Vue.js (https://coding.imooc.com/class/74.html).

Адрес демонстрационного проекта (http://ustbhuangyi.com/sell/).

QR-код

Продвинутый практический курс музыкального приложения на основе Vue.js (http://coding.imooc.com/class/107.html).

Адрес демонстрационного проекта (http://ustbhuangyi.com/music/).

QR-код