Better-scroll

:

• 1.x Docs: https://better-scroll.github.io/docs-v1/.
• 2.x Docs: https://better-scroll.github.io/docs/zh-CN/.

注意: 1.x 的代码已经不维护，请尽早升级版本。

Puppeteer 安装

BetterScroll 依赖 puppeteer, в Китае скачивание puppeteer может быть неудачным, можно настроить зеркало puppeteer Taobao.

PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors yarn

Установка

npm install better-scroll -S # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动，大部分情况可能只需要一个简单的滚动

import BetterScroll from 'better-scroll'

let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {})

CDN

С всеми плагинами BetterScroll:

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

// minify
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

Без каких-либо плагинов CoreScroll:

<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

// minify
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>

let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})

Что такое BetterScroll?

BetterScroll — это плагин, который фокусируется на решении различных сценариев прокрутки для мобильных устройств (уже поддерживает ПК). Его ядро основано на реализации iscroll, его API в основном совместим с iscroll, и некоторые функции и улучшения производительности были добавлены поверх iscroll.

BetterScroll реализован на чистом JavaScript, что означает, что он не зависит от внешних библиотек.

Начало работы

Наиболее распространённым сценарием использования BetterScroll является прокрутка списка, давайте посмотрим на структуру HTML.

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- Здесь можно разместить некоторые другие элементы DOM, но это не повлияет на прокрутку -->
</div>

В приведённом выше коде BetterScroll действует на внешнем контейнере wrapper, а содержимое прокручивается элементом content. Обратите внимание, что по умолчанию BetterScroll обрабатывает прокрутку первого дочернего элемента контейнера (content), а остальные элементы будут игнорироваться. Однако для версии BetterScroll v2.0.4 можно использовать параметр specifiedIndexAsContent для указания содержимого, подробности см. в документации.

Самый простой код инициализации выглядит следующим образом:

import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

BetterScroll предоставляет класс, экземпляр которого принимает собственный объект DOM в качестве первого параметра. Конечно, если передаётся строка, BetterScroll внутренне попытается вызвать querySelector для получения объекта DOM.

Принцип прокрутки

Многие люди уже использовали BetterScroll, и я получаю больше всего отзывов о проблемах:

BetterScroll был инициализирован, но не может прокручиваться.

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

Принцип работы BetterScroll такой же, мы можем более наглядно почувствовать это с помощью диаграммы:

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

Плагины

Используя плагины, вы можете расширить возможности ядра BetterScroll core scroll, например:

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

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

Для получения подробной информации см. документацию по плагинам.

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

Ранее я писал об использовании BetterScroll с Vue, также надеюсь, что вы сможете поделиться своим опытом использования BetterScroll в других фреймворках.

Очень крутой компонентный набор, основанный на Vue, называется cube-ui.

Применение BetterScroll в реальных проектах

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

Практический курс Vue.js High Fidelity Takeaway Hungry Meow Адрес демонстрации проекта

Продвинутый практический курс по созданию музыкального приложения на Vue.js

Адрес демонстрации проекта