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>

运行结果:

 

 

 

posted @ 2022-07-05 10:22  smile_Lu  阅读(623)  评论(0)    收藏  举报