首先安装better-scroll：npm install better-scroll --save
然后在当前的vue页面引用：import BScroll from "better-scroll";
html部分：左边导航，动态样式绑定，右边内容滚动，左边导航联动，或者左边点击，右边滚动
<!--导航长背景图片选中状态-->
<div
class="lxp_softdetails_one_1_nav_name"
v-for="(i,j) of List"
:key="`List + ${j}`"
@click="goScroll(j,i.img,i.img1)"
:class="{
active1: j == currentIndex && j == 0,
active2: j == currentIndex && j == 1,
active3: j == currentIndex && j == 2,
active4: j == currentIndex && j == 3,
}"
>
<!--导航短背景图片未选中状态-->
<div
class="lxp_softdetails_one_1_nav_name_img"
:style="`backgroundImage:url(${i.img1})`"
:class="{
backgroundNull: j == currentIndex,
bc1: j == 0,
bc2: j == 1,
bc3: j == 2,
bc4: j == 3,
}"
></div>
<div class="lxp_softdetails_one_1_nav_name_1">
<div class="lxp_softdetails_one_1_nav_name_1_span">
{{ i.title }}
</div>
</div>
</div>
<!--这里一定要注意，better-scroll滚动的内容区域有它的结构，最外层写ref,这样最保险，它的下面只能有一个孩子，如wrapper,wrapper下面可以有很多同级元素，这些同级元素有个共有的classname，到时需要查找他们，来获取他们各自内容的高度-->
<div class="lxp_softdetails_content" ref="right">
<div class="wrapper">
<!--电控系统列表-->
<div class="lxp_softdetails_one_2_list" id="0">
<div class="lxp_softdetails_one_2_list_title">
电控系统列表
</div>
<template v-if="systemList == null">
<div class="lxp_softdetails_two">暂无数据</div>
</template>
<template v-else>
<div
class="lxp_softdetails_one_2_list_content"
v-html="systemList"
></div>
</template>
</div>
<!--功能列表-->
<div class="lxp_softdetails_one_2_list" id="1">
<div class="lxp_softdetails_one_2_list_title">功能列表:</div>
<template v-if="functionList == null">
<div class="lxp_softdetails_two">暂无数据</div>
</template>
<template v-else>
<div
class="lxp_softdetails_one_2_list_content"
v-html="functionList"
></div>
</template>
</div>
</div>
</div>
//导航的CSS样式写几个做代表，写了!important的一定有它的作用
.active1 {
color: #ffffff !important;
background-image: url("https://h5.mythinkcar.com/softIMG/one.png");
}
.bc1 {
background-image: url("https://h5.mythinkcar.com/softIMG/red.png");
}
.backgroundNull {
background-image: url() !important;
}
//说明一下classname:lxp_softdetails_content的css，这是你设定的滚动的高度
.lxp_softdetails_content {
max-height: 460px;
overflow: hidden;
}
//接下来是script部分
//data部分
leftData: [],//左侧数据
rightData: [],//右侧数据
rightBScroll: null,//右侧滑动
allHeight: [],//承载右侧每一块的高度值
scrollY: "",//右侧滚动距离
//在methods中调用接口，一定要用到this.$nextTick()，避免接口数据顺序不对导致的无法滚动问题
methods:{
getPage() {
return soft({
lanType: "1002",
softLanguageName: "MAZDA",
}).then((res) => {
console.log(res,res.result);
this.functionList = res.result.functionList; //功能列表
this.systemList = res.result.systemList; //系统列表
this.$nextTick(() => {
//右侧滚动
//实例化一个对象
this.rightBScroll = new BScroll(this.$refs.right,{
click: true,//这个是导航点击事件生效的关键
probeType: 5,//这个的话至少是2
pullUpLoad: true,//上拉
pullDownRefresh: true,//下拉
});
//统计右侧所有板块高度值，并且放入数组中
let height = 0;
this.allHeight.push(height);
//获取右侧每一块高度
let uls = this.$refs.right.getElementsByClassName(
"lxp_softdetails_one_2_list"
);
//把DOM对象转换成真正的数组
Array.from(uls).forEach((v) => {
height += v.clientHeight;//
console.log(height);
console.log(v.clientHeight);//每个元素内容的高度
this.allHeight.push(height);
});
console.log(this.allHeight);
//得到右侧滚动的值
this.rightBScroll.on("scroll",(pos) => {
this.scrollY = Math.abs(pos.y);
console.log(this.scrollY);//滚动的高度值
});
});
});
},
//左边点击右边滚动
goScroll(_index,_img,_img1) {
//0代表滚动到顶部，-this.allHeight[_index]代表往上滚动的高度，300代表平滑滚动效果
this.rightBScroll.scrollTo(0,-this.allHeight[_index],300);
},
},
//接下来是在computed计算属性上判断获取到当前滚动的下标值
computed: {
currentIndex() {
//当第二个return 返回true时，则返回当前下标，即当前导航所在的下标位置
return this.allHeight.findIndex((item,index) => {
//判断如果当前滚动值>=allHeight数组里的item高度值又<下一个下标的高度值时，则返回true
return this.scrollY >= item && this.scrollY < this.allHeight[index + 1];
});
},
},
原文地址：https://blog.csdn.net/qq_45031347
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。