1、基本使用
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie= Edge ">
<title>Document</title>
<link hr ef="https://unpkg .COM /element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<style>
*{
m arg in: 0;
padding: 0;
border: 0;
outline: none;
font-f ami ly: Arial;
list-style: none;
- webkit -font-smoothing: antialiased;
}
html, body, # app{
h ei ght: 100%;
}
#app{
padding: 20px 0;
box-sizing: border-box;
}
.wrapper{
dis play : flex;
height: 100%;
overflow: hidden;
max-width: 1200px;
mar gin : 0 auto;
}
.menu{
width: 100px;
height: 100%;
padding-right: 20px;
}
.content{
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
}
.menu -i tem{
margin-bottom: 10px;
}
.menu-item-content{
width: 100%;
padding: 7px 0;
text-align: center ;
border: 1px solid #ddd;
border-radius: 2px;
color: #333;
cursor: pointer;
}
.active{
border-color: #409EFF;
background: #409EFF;
color: #fff;
}
.content-item{
margin-bottom: 20px;
}
.content-item -t ext{
border-radius: 2px;
border: 1px solid #ddd;
}
.content-item-text> img {
width: 100%;
vert ical -align: middle;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper">
<div class="menu">
<ul>
<li class="menu-item" v-for="(item, index) in menu" :key="index" @click="handleClick(index)">
<div class="menu-item-content" :class="{'active': get current Index() == index}" v-text="item.label"></div>
</li>
</ul>
</div>
<div class="content" ref="content">
<ul>
<li class="content-item" v-for="(item, index) in content" :key="index">
<div class="content-item-text">
<img :src="item" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg测试数据/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
contentScroll: null,
listHeight: [], // 用来存储每一个子 盒子 的高度
currentIndex: 0,
scrollY: 0,
menu: [
{
label: '图片一',
id: 0,
},
{
label: '图片二',
id: 1,
},
{
label: '图片三',
id: 2,
},
{
label: '图片四',
id: 3,
},
{
label: '图片五',
id: 4,
},
],
content: [
'https://timgsa.b ai du测试数据/timg?image&am p; quality=80&size=b9999_10000&sec=1575539093143&di=d3d787658bd0b0 f2 1d2459d90b3bd19b&imgtype= jpg &src=http%3A%2F%2Fimg4.imgtn.bdimg测试数据%2Fit%2Fu%3D1735688044%2C4235283864%26fm%3D214%26gp%3D0.jpg',
'https://timgsa.baidu测试数据/timg?image&quality=80&size=b9999_10000&sec=1575539192878&di=f46b69a4c2d B2B a2f07f0fe1cc7af952&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang测试数据%2Fuploads%2Fitem%2F201210%2F04%2F20121004231502_NrBQG.jpeg',
'https://timgsa.baidu测试数据/timg?image&quality=80&size=b9999_10000&sec=1575539157019&di=122152eaee12d6ea019 B2C ec2b80e468&imgtype=0&src=http%3A%2F%2Fpic44.nipic测试数据%2F20140723%2 F1 8505720_094503373000_2.jpg',
'https://timgsa.baidu测试数据/timg?image&quality=80&size=b9999_10000&sec=1575539175569&di=d33d35a826cc700add7b7bd53f9282c0&imgtype=0&src=http%3A%2F%2Fpic37.nipic测试数据%2F20140103%2F10616010_215644481373_2.jpg',
'https://timgsa.baidu测试数据/timg?image&quality=80&size=b9999_10000&sec=1575539212191&di=ec438ea6559d06cc1a49a27b122e8e DF &imgtype=0&src=http%3A%2F%2Fb-ssl.duitang测试数据%2Fuploads%2F blog %2F201312%2F09%2F20131209151602_evtcw.jpeg',
]
},
methods: {
initScroll() {
const content = this.$refs.content;
this.contentScroll = new BScroll(content, {
click: true, // 因为betterscroll默认会阻止 点击事件 。这里要设置一下
mouseWheel: true, // 鼠标滚轮滚动
PR obeType: 3,
scrollY: true,
scrollbar: {
fade: true, // 是否 显示滚动条
interactive: false, // 1.8.0 新增
},
p rev entDefault: false, // 阻止了浏览器默认选中行为
});
// 获取滚动的值，赋值给scrollY
this.contentScroll.on('scroll', pos => {
this.scrollY = Math.abs(Math.round(pos.y));
});
},
getCurrentIndex() {
for (let i = 0; i < this.listHeight.length; i++ ) {
const height = this.listHeight[i];
const height1 = this.listHeight[i + 1];
// 解决当滚动到最后时，内容不足盒子高度时，菜单显示问题。当滚动到最后，选中最后一个菜单
// maxScrollY：最大纵向滚动位置
if (Math.abs(this.contentScroll.maxScrollY) === Math.abs(this.scrollY)) {
return this.content.length - 1;
}
if (!height1 || (this.scrollY < height1 && this.scrollY >= height)) {
return i;
}
}
},
handleClick(index) {
const content = this.$refs.content;
const contentList = content.getElementsBy classname ('content-item');
const el = contentList[index];
// scrollToElement：滚动到目标元素
this.contentScroll.scrollToElement(el, 300);
},
getHeightList() {
this.listHeight = [];
let height = 0;
this.listHeight.push(height);
const content = this.$refs.content;
const contentList = content.getElementsByClassName('content-item');
for (let i = 0; i < contentList.length; i++) {
const item = contentList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
this.initScroll();
}
},
mount ed() {
this.$nextTick(function() {
// 由于图片太大，加载比较慢，造成还没有完全加载完就初始化了，导致滚动不了，所以这里加个定时器延迟下
setTimeout(() => {
this.getHeightList();
}, 400);
});
},
});
</script>
</body>
</html>
由于浏览器的兼容性，每个浏览器的滚动条样式都不尽相同，使用css样式修改的话，也只有部分浏览器能达到你想要的效果。
better-scroll模拟实现滚动条，父容器设置固定高度，并设置属性 overflow:hidden，让子元素超出父容器后隐藏，better-scroll作用在父容器上，通过transform：translate属性来让子元素滚动到想要的地方。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 better-scroll实现菜单和内容联动的效果 全部内容，希望文章能够帮你解决 better-scroll实现菜单和内容联动的效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于better-scroll实现菜单和内容联动的效果的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200957