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 底部边框 与视窗顶部平齐
            });
        }
    }
})

预览