本文共 1916 字，大约阅读时间需要 6 分钟。

前言

最近在vue3中研究了一下移动端常用的插件better-scroll，方便确实是很方便，不过也是踩了不少的坑。共勉。

PS：本文着重说明笔者遇到的坑点

正文

一. 安装

$ npm i better-scroll

二. 引入

在你需要的组件进行局部引入

import Bscroll from 'better-scroll'

三. 使用

1. 创建实例
   在setupAPI中，需将创建实例的过程放入onMounted函数中。因为实例的创建需要寻找DOM元素，而在挂载完数据的onMounted周期，就可以完成了。而在setup的其他部分，我们也很可能用到这个实例。所以，要把声明放在onMounted之外，只在其中赋值。

onMounted(() => {
      bscroll = new Bscroll((document.querySelector('.wrapper')) as any, {
        scrollY: true,     probeType: 3,     click: true,     pullUpLoad: true,     mouseWheel: true   })})

2. 注册事件
   利用这个插件，主要目的就是实现上拉加载数据。pullingUp是上拉事件，有个特别之处，就是一旦触发一次pullingUp,如果不手动调用实例方法bscroll.finishPullUp()，则一直不会再触发该事件。通常，获取分页数据之后，会在回调函数中判断：如果数据不为空，则调用bscroll.finishPullUp()，从而再次获取数据；如果数据为空，意味着数据已经全部加载，则不调用。

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()          }        })  })})

3. 上一点的补充
   这里还有一个点要注意：如下图，切换tab栏可以从接口中获取不同排序的数据。当按销量排序获取数据，且不断下拉，直至数据全部加载完毕。此时，如果点击时间排序，请求参数分页会初始化为1（或为其他，本例是1）。同时，你也会发现，上拉加载数据失效。其实并不难发现，加载完数据之后，我们没有调用bscroll.finishPullUp()，导出上拉事件无法触发。解决的方法也很简单，在切换tab栏时，加入一行代码即可。

bscroll && bscroll.finishPullUp()

4. 实例方法refresh() 很重要！ 当你展现在页面的数据列表发生变化，从而导致了DOM元素高度的变化，那么就要调用这个方法，否则better-scorll会不正常工作。比如，上拉加载一次数据后，数据被加入到了数据列表，这导致v-for遍历生成的DOM更多，高度也就变高了，这是就需要调用refresh()。但是，如果你在获取数据后的回调函数中同步调用这个方法，则无法生效。这是，可以利用watch和nextTick。记得开启深度监听，否则可能监听不到。如果你的数据列表是用ref声明的响应式数据，则像下面的代码那样即可；如果你的数据列表是用reactive的数据模型中的属性，则在watch中，要写成getter函数的方式

watch(goods, () => {
         nextTick(() => {
           bscroll && bscroll.refresh()      })    }, {
         deep: true    })

5. 待补充…

结语

如果对你有帮助的话，请点一个赞吧

转载地址：http://drozi.baihongyu.com/