效果如图所示
"vue-seamless-scroll": "^1.1.23", 安装该组件
<div class="wrapper menu" ref="wrapper">
<ul ref="content" class="content">
<li class="activate">
<i>首页</i>
<div>首页</div>
</li>
<li
v-for="(item, index) in menuList"
:key="index"
@click="menuSkip(item.name)"
>
<i>{{ item.meta.title }}</i>
<div>{{ item.meta.title }}</div>
</li>
</ul>
<div v-if="opac" class="opac">首页</div>
</div>
import BScroll from "better-scroll"; //引入该组件
initScroll() {
// 给内层盒子设置宽度,不设置宽度的话无法滚动
let len = this.menuList.length + 1;
let allWidth = 0;
for (let i = 0; i < len; i++) {
let liWidth = this.$refs.content.children[i].offsetWidth;
allWidth += liWidth;
}
// 如果有外边距,可以这样写。需要去掉最后一个元素的外边距,在后面减一下
// let width = this.goodslength * (60 + 10) - 10
this.$refs.content.style.width = allWidth + 10 + 80 + "px"; //10 :放大的宽度,80是右边遮罩的宽度
if (allWidth + 10 > this.$refs.wrapper.offsetWidth) {
this.opac = true;
} else {
this.opac = false;
}
this.$nextTick(() => {
if (!this.Scroll) {
this.Scroll = new BScroll(this.$refs.wrapper, {
click: true, // 配置允许点击事件
scrollX: true, // 开启横向滚动
eventPassthrough: "vertical", // 当设置 eventPassthrough 为 'vertical' 的时候,scrollY 无效
});
} else {
this.Scroll.refresh(); // 重新计算 better-scroll,当 DOM 结构发生变化的时确保滚动效果正常
}
});
},