vue中使用better-scroll实现菜单和列表联动的滚动效果，附完整演示代码，（可直接复制）
实现类似这种效果：
安装better-scroll
npm install better-scroll --save
vue中引入
import BScroll from 'better-scroll'
完整示例demo（含css，js，html，和data数据）：
可直接复制观看： 含有详细注释
<template>
<div id="app">
<div id="wrap">
<div class="goodMenu" ref="goodMenu">
<ul>
<li
v-for="(item ,index) in goodMenu"
:key="index"
:class="{active: currentIndex === index}"
@click="selectLeft(index)"
ref="lItem"
>{
{
item}}</li>
</ul>
</div>
<div class="goodList" ref="goodList">
<ul>
<li v-for="(items, index) in goodList" :key="index" ref="rItem">
<p>{
{
items.name}}</p>
<div v-for="(item, key) in items.data" :key="key">{
{
item}}</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
data() {
return {
number: 30,
goodMenu: [
"菜单1",
"菜单2",
"菜单3",
"菜单4",
"菜单5",
"菜单6",
"菜单7",
"菜单8"
],
goodList: [
{
name: "菜单1", data: ["1.1", "1.2", "1.3", "1.4", "1.5"] },
{
name: "菜单2", data: ["1.1", "1.2", "1.3", "1.4", "1.5", "1.6"] },
{
name: "菜单3", data: ["1.1", "1.2", "1.3", "1.4", "1.5"] },
{
name: "菜单4", data: ["1.1", "1.2", "1.3", "1.4", "1.5"] },
{
name: "菜单5",
data: ["1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8"]
},
{
name: "菜单6", data: ["1.1", "1.2", "1.3", "1.4", "1.5"] },
{
name: "菜单7", data: ["1.1", "1.2", "1.3", "1.4","1.1", "1.2"] },
{
name: "菜单8", data: ["1.1", "1.2","1.1", "1.2","1.1", "1.2"] }
],
scrollY: 0, //获取实时滚动位置
heightList: [] //获取每一个li的高度
};
},
computed: {
//当前想要选中的菜单
currentIndex() {
const index = this.heightList.findIndex((item, index) => {
return (
this.scrollY >= this.heightList[index] &&
this.scrollY < this.heightList[index + 1]
);
});
return index > 0 ? index : 0;
}
},
methods: {
selectLeft(index) {
//点击左边菜单栏，立马高亮，不会等到右侧滚动结束后，左侧菜单栏才开始高亮（优化）
this.scrollY = this.heightList[index];
//点击了左侧菜单，获取相应右侧列表的元素，并使用Bscroll提供的scrollToElement() Api跳转
let rItem = this.$refs.rItem;
let el = rItem[index];
this.goodmenu.scrollToElement(el, 1000);
},
//初始化 better-scroll
_scrollInit() {
this.menuList = new Bscroll(this.$refs.goodMenu, {
//设置点击为true，左边菜单栏才能点击
click: true
});
this.goodmenu = new Bscroll(this.$refs.goodList, {
//选中模式2，避免惯性的滑动也触发事件
probeType: 2
});
this.goodmenu.on("scroll", pos => {
//获取实时滚动的距离 使用scrollY接收
this.scrollY = Math.abs(pos.y);
});
this.goodmenu.on("scrollEnd", pos => {
//结束时触发事件获取一次位置，因为使用了模式2，惯性滚动不触发事件
this.scrollY = Math.abs(pos.y);
});
},
//获取右侧列表每一个li的高度，存入数组中
getHeight() {
//获取每一个li的高度
const lis = this.$refs.rItem;
//heightList的第一个元素为0
let height = 0;
this.heightList.push(height);
//之后的高度即为当前li的高度加上之前面li的高度和
lis.forEach(item => {
//clientHeight = content + padding
height += item.clientHeight;
this.heightList.push(height);
});
}
},
created() {
//因为 _scrollInit函数需要操作DOM，因此必须在DOM元素存在文档中才能获取DOM节点
//因此在 nextTick回调函数里面调用可以是实现此功能
this.$nextTick(() => {
this._scrollInit();
this.getHeight();
});
}
};
</script>
<style >
* {
margin: 0;
padding: 0;
}
#wrap {
display: flex;
height: 200px;
background-color: skyblue;
}
.active {
background-color: red;
}
.goodMenu {
line-height: 60px;
background-color: pink;
}
.goodList{
overflow: hidden;
}
.goodList > ul {
width: 300px;
text-align: center;
list-style: none;
}
</style>