【JS 插件】better-scroll.js — 移动端滚动插件[兼容PC]

BetterScroll 是一款重点解决移动端各种滚动场景需求的插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。目前已兼容 PC 端，但似乎还有点小问题。该插件是借鉴 iscroll 发展而来， API 基本兼容 iscroll。值得注意的是 BetterScroll 是使用纯 JavaScript 实现的，所以你可以原生使用它，也可以与一些流行的 MVVM 框架结合使用，比如官方示例中用到的 Vue。

插件安装

BetterScroll 已经更新到 2.0.6 版本了，新版本为了解耦 BetterScroll 1.x 的各个 feature 的功能，防止 bundle 体积无限制的增加，采用了插件化 的架构设计。所以新版本的安装使用就变成了这个样式：

全部安装

npm 方式安装

// 安装
npm install better-scroll -S           # 安装带有所有插件的 BetterScroll
// 导入
import BetterScroll from 'better-scroll'
// 使用
let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

script 标签引入

// 引入
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
// 压缩后的文件引入
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
// 使用
let wrapper = document.getElementById("wrapper")
let bs = BetterScroll.createBScroll(wrapper, {})

按需安装

npm 方式安装

核心部分安装

// 安装
npm install @better-scroll/core # 核心滚动部分
// 导入
import BScroll from '@better-scroll/core'
// 使用
let bs = new BScroll('.wrapper', {})

插件部分安装

// 安装
npm install @better-scroll/PluginName --save
// 导入
import Plugin from 'somewhere'
BScroll.use(Plugin)
// 使用
new BScroll('.wrapper', {
    pluginKey: {}         // pluginKey 对应 Plugin 类上静态属性 pluginName 的值，否则插件无法实例化
})

script 标签引入

// 引入
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>
// 压缩后的文件引入
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>
// 使用
let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})

注意：.wrapper 为外层包裹的 div 类名，内部滚动部分的高度应高于 wrapper 的高度，否则不滚动！

当前 BetterScroll 自带的插件有：

mouse-wheel：扩展 BetterScroll 鼠标滚轮的能力，目前支持鼠标滚轮有：core、slide、wheel、pullup、pulldown。
observe-dom：开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。
pulldown：为 BetterScroll 扩展下拉刷新的能力。
pullup：为 BetterScroll 扩展上拉加载的能力。
scrollbar：为 BetterScroll 提供了样式美观的滚动条，当滚动停止的时候，滚动条渐隐。
slide：为 BetterScroll 扩展了轮播焦点图的能力。
wheel：为 BetterScroll 提供了实现类似 IOS Picker 组件的能力，注意：只是实现 Picker 效果的 JS 逻辑部分， DOM 模版需要用户去实现。
zoom：为 BetterScroll 提供缩放功能。
nested-scroll：协调 BetterScroll 双层嵌套的滚动行为，目前只解决了双层嵌套问题，比如竖向套竖向、横向套横向。
infinity：为 BetterScroll 提供了无限滚动的能力。如果有大量的列表数据需要渲染，可以使用 infinity 插件，此时 BetterScroll 只会渲染一定数量的 DOM 元素，从而使页面在大量数据时依然保持流畅滚动，数据量小则使用 core 即可。
movable：为 BetterScroll 拓展可移动拖拽的能力。