vue3中使用better-scroll

需求分析

假设现在有这么一个需求，页面顶部有几个tabs导航，每一个tab下都有一个可以滑动的切换按钮。咱们就可以引入better-scroll来实现这个需求。

安装

首先下载better-scroll

npm install @better-scroll/core --save
1

html

<van-tabs v-model:active="dataMap.active">
      <van-tab v-for="(item, index) in dataMap.tabs" :title="item.title">
        <div class="scrollBar" :ref="(el) => methodMap.setItemRef(el, index)">
          <div :id="'scrollRefs' + index">
            <div
              :class="{ roundtab: true, redroundtab: item1.checked }"
              v-for="(item1, index1) in item.children"
              @click="changeTabs(index, index1)"
            >
              {{ item1.title }}
            div>
          div>
        div>
      van-tab>
    van-tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

css

滚动的原理就是让滚动区域超出容器，css设置如下

.scrollBar{
  width: 100vw;
  white-space: nowrap;
}

 .roundtab {
    display: inline-block;
    width: 3rem;
}
1
2
3
4
5
6
7
8
9

js

import BScroll from "better-scroll";

  setItemRef: (el, key) => {
    if (el) {
      scrollRefs.value[key] = el;
      let width = dataMap.tabs[key].children.length * 80; // 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度

      el.children[0].style.width = width + "px";
      new BScroll(el, {
        startX: 0, /// 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
        click: true,
        scrollX: true,
        scrollY: false, // 忽略竖直方向的滚动
        eventPassthrough: "vertical",
        useTransition: false, // 防止快速滑动触发的异常回弹
      });
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18