前言
最近在vue3中研究了一下移动端常用的插件better-scroll
,方便确实是很方便,不过也是踩了不少的坑。共勉。
PS:本文着重说明笔者遇到的坑点
正文
一. 安装
$ npm i better-scroll
二. 引入
在你需要的组件进行局部引入
javascript">import Bscroll from 'better-scroll'
三. 使用
- 创建实例
在setup
API中,需将创建实例的过程放入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
})
- 待补充…
结语
如果对你有帮助的话,请点一个赞吧