vue点击导航,对应板块滚动到指定位置
<html lang="en"> <head> <meta charset="utf-8"> <title>vue点击导航,对应板块滚动到指定位置</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> <script src="js/vue.js"></script> </head> <body> <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> <style type="text/css"> *{margin: 0;border:0;padding: 0;} ul,li{list-style: none;} .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;} </style> <script> window.onload=function(){ 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'} ] }, created (){ }, methods:{ dianji:function(index){ this.currentIndex=index; this.$el.querySelector(`#id${index}`).scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "center" // start 上边框 center 中间 end 底部边框 与视窗顶部平齐 }); } } }) } </script> </body> </html> <script> </script>
运行结果: