vue点击导航,对应板块滑动到指定位置
<div class="whole"> <div class="left"> <ul> <li v-for="(item,index) in arry" :key="index" @click="dianji(index)" :class="currentIndex==index?'navStyle':''">{{item.id}}</li> </ul> </div> <div class="right"> <ul> <li :id="'id'+index" v-for="(item,index) in arry" :key="index" :class="currentIndex==index?'mainStyle':''"><img :src="item.img" ></li> </ul> </div> </div>
css
*{margin: 0;border:0;padding: 0;}
.whole{width: 1000px;height: 700px;margin: 100px auto;display: flex;flex-direction: row;align-items: flex-start;justify-content: center;background: #f1f1f1;}
.left{margin-right: 40px;}
.left li{width: 40px;height: 40px;background: #ccc;text-align: center;line-height: 40px;margin: 10px 0;}
.right{width: 300px;height: 700px;overflow-x: hidden;overflow-y: scroll;}
.right img{width: 100%;}
.right::-webkit-scrollbar{display: none;}
.left .navStyle{background: pink;}
.right .mainStyle{border: 5px solid magenta;}
<script src="js/vue.js"></script>
js
var app=new Vue({
el: '.whole',
data:{
currentIndex:0,
arry:[
{id:1,img:'images/tupian1.jpg'},
{id:2,img:'images/tupian2.jpg'},
{id:3,img:'images/tupian3.jpg'},
{id:4,img:'images/tupian4.jpg'},
{id:5,img:'images/tupian5.jpg'}
]
},
methods:{
dianji:function(index){
this.currentIndex=index;
this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "center" // start 上边框 center 中间 end 底部边框 与视窗顶部平齐
});
}
}
})
预览