vue3中使用better-scroll

甩锅工程师

已于 2023-11-06 14:29:01 修改

阅读量592

点赞数

分类专栏：前端文章标签：前端 vue.js

于 2023-11-06 14:08:45 首次发布

本文链接：https://blog.csdn.net/KID963931445/article/details/134244347

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

文章目录

需求分析
安装
html
css
js

需求分析

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

安装

首先下载better-scroll

npm install @better-scroll/core --save

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>

在这里插入图片描述

css

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

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

 .roundtab {
    display: inline-block;
    width: 3rem;
}

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, // 防止快速滑动触发的异常回弹
      });
    }
  },