前言
最近在vue3中研究了一下移动端常用的插件better-scroll，方便确实是很方便，不过也是踩了不少的坑。共勉。
PS：本文着重说明笔者遇到的坑点
正文
一. 安装
$ npm i better-scroll
二. 引入
在你需要的组件进行局部引入
javascript">import Bscroll from 'better-scroll'
三. 使用
- 创建实例
在setupAPI中，需将创建实例的过程放入onMounted函数中。因为实例的创建需要寻找DOM元素，而在挂载完数据的onMounted周期，就可以完成了。而在setup的其他部分，我们也很可能用到这个实例。所以，要把声明放在onMounted之外，只在其中赋值。
javascript">onMounted(() => {
bscroll = new Bscroll((document.querySelector('.wrapper')) as any, {
scrollY: true,
probeType: 3,
click: true,
pullUpLoad: true,
mouseWheel: true
})
})
- 注册事件
利用这个插件，主要目的就是实现上拉加载数据。pullingUp是上拉事件，有个特别之处，就是一旦触发一次pullingUp,如果不手动调用实例方法bscroll.finishPullUp()，则一直不会再触发该事件。通常，获取分页数据之后，会在回调函数中判断：如果数据不为空，则调用bscroll.finishPullUp()，从而再次获取数据；如果数据为空，意味着数据已经全部加载，则不调用。
javascript">onMounted(() => {
bscroll = new Bscroll((document.querySelector('.wrapper')) as any, {
scrollY: true,
probeType: 3,
click: true,
pullUpLoad: true,
mouseWheel: true
})
//上拉加载数据
bscroll.on('pullingUp', () => {
getHomeGoods(GoodsTypesEnum[data.contentIndex], ++data.currentPage)
.then((res: any) => {
if (res.goods.length > 0) {
goods.value.push(...res.goods)
bscroll.finishPullUp()
}
})
})
})
- 上一点的补充
这里还有一个点要注意：如下图，切换tab栏可以从接口中获取不同排序的数据。当按销量排序获取数据，且不断下拉，直至数据全部加载完毕。此时，如果点击时间排序，请求参数分页会初始化为1（或为其他，本例是1）。同时，你也会发现，上拉加载数据失效。其实并不难发现，加载完数据之后，我们没有调用bscroll.finishPullUp()，导出上拉事件无法触发。解决的方法也很简单，在切换tab栏时，加入一行代码即可。
javascript">bscroll && bscroll.finishPullUp()
4. 实例方法refresh()
很重要！ 当你展现在页面的数据列表发生变化，从而导致了DOM元素高度的变化，那么就要调用这个方法，否则better-scorll会不正常工作。比如，上拉加载一次数据后，数据被加入到了数据列表，这导致v-for遍历生成的DOM更多，高度也就变高了，这是就需要调用refresh()。但是，如果你在获取数据后的回调函数中同步调用这个方法，则无法生效。这是，可以利用watch和nextTick。记得开启深度监听，否则可能监听不到。如果你的数据列表是用ref声明的响应式数据，则像下面的代码那样即可；如果你的数据列表是用reactive的数据模型中的属性，则在watch中，要写成getter函数的方式
javascript"> watch(goods, () => {
nextTick(() => {
bscroll && bscroll.refresh()
})
}, {
deep: true
})
- 待补充…
结语
如果对你有帮助的话，请点一个赞吧
