引言
现如今，移动设备已经成为了人们生活中最常用的设备之一。无论是浏览新闻、看直播、购物，还是游戏娱乐，都需要我们通过手机进行操作。而手机屏幕相对比较小，又需要通过不同手势进行操作，因此一个流畅的滚动功能尤为重要。better-scroller 就是一个专门为此开发的 npm 包，本文就来详细介绍一下如何使用该包。
安装
使用 better-scroller 包前需要先进行安装。我们可以使用 npm 进行安装，打开终端输入以下命令即可：
npm install better-scroller -S
使用
基本使用
安装完 better-scroller 后，我们就可以在项目中引入该包。在 JavaScript 代码中，我们需要通过以下代码创建一个新的 better-scroller 对象：
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroller = new BScroll(wrapper, {
// 配置参数
})其中，wrapper 表示滚动区域的容器，需要通过选择器获取到该元素。第二个参数是配置参数，我们可以根据具体需求进行配置，例如：
let scroller = new BScroll(wrapper, {
scrollY: true, // 开启 Y 轴滚动
click: true // 允许点击事件
})这样就可以创建一个新的 better-scroller 对象了。可以发现，使用 better-scroller 进行滚动非常简单，只需要传入一个容器元素即可实现。
配置参数
使用 better-scroller 进行滚动时，有一些配置参数是非常有用的。下面我们来介绍几个比较重要的参数：
- scrollY 和 scrollX
scrollY 表示是否开启 Y 轴滚动，scrollX 表示是否开启 X 轴滚动。默认情况下，两者都为 false，也就是不开启滚动。
let scroller = new BScroll(wrapper, {
scrollY: true, // 开启 Y 轴滚动
scrollX: true // 开启 X 轴滚动
})- click 和 tap
click 表示是否开启点击事件，tap 表示是否开启 tap 事件。两者的区别在于，click 会在点击完整个元素后触发，而 tap 会在点击时立刻触发。默认情况下，click 为 true，tap 为 false。
let scroller = new BScroll(wrapper, {
click: true, // 开启点击事件
tap: true // 开启 tap 事件
})- probeType
probeType 表示滚动的精度，分为 1、2、3 三个级别。默认为 1，代表不需要太高的滚动精度。如果要实现各种复杂的效果（如滚动到某个区域后触发事件等），需要将该参数设为 2 或 3。
let scroller = new BScroll(wrapper, {
probeType: 3 // 滚动精度最高
})- pullDownRefresh 和 pullUpLoad
pullDownRefresh 表示是否开启下拉刷新，pullUpLoad 表示是否开启上拉加载。默认值都为 false，如果需要使用该功能，需要打开开关并配置相关的方法。
let scroller = new BScroll(wrapper, {
pullDownRefresh: true, // 开启下拉刷新
pullUpLoad: true // 开启上拉加载
})方法
除了配置参数外，better-scroller 还提供了一些实用的方法，例如：
- scrollTo(x, y, time)
将滚动区域滚动到指定位置。x 表示横轴滚动距离，y 表示纵轴滚动距离，time 表示滚动时间（单位为毫秒）。
scroller.scrollTo(0, 100, 800) // 将滚动区域滚动到纵轴距离为 100 的位置，滚动时间为 800ms
- refresh()
刷新滚动区域，通常在容器大小或内容变化后调用。
scroller.refresh() // 刷新滚动区域
- disable()
禁用滚动，禁用后用户将无法通过手势进行滚动。
scroller.disable() // 禁用滚动
- enable()
启用滚动。
scroller.enable() // 启用滚动
示例代码
-- -------------------- ---- ------- ------ ------- ---- --------------- --- ------- - ---------------------------------- --- -------- - --- ---------------- - -------- ----- ------ ----- ---------------- ----- ----------- ----- ---------- - -- -------------------------- -------- -- - -- ---- ------------------------- -- ------------------------ -------- -- - -- ---- ----------------------- --
结语
better-scroller 是一个非常实用的 npm 包，可以方便地实现流畅的滚动。在学习使用该包时，我们需要注意配置参数的使用，掌握各种方法的调用，才能更好地使用该包实现高效的滚动效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600571c381e8991b448e8371