vue3中使用better

vue3中使用better

文章目录

• 需求分析
• 安装
• 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, // 防止快速滑动触发的异常回弹});}},