tab选项卡平滑滚动vue

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        ul {
            padding: 0
        }
        ul li {
            list-style: none;
        }
        .tab ul{
            position: relative;
            background: #333;
        }
        .tab ul li {
            display: inline-block;
            padding: 50px;
            width: 100px;
            height: 25px;
            margin: 0;
            background: #ccc;
            text-align: center;
            border: 1px solid #000;
        }
        .tab .bottom {
            position: absolute;
            left: 0;
            width: 100px;
            height: 3px;
            background: #f00;
            transition: all .2s;
        }
    </style>
</head>
<body>
<div class="tab" id="box">
    <ul ref ="tabWrapper">
        <li v-for="(item, index) in list" @click="tabClick(index, $event)">{{item}}</li>
        <div class="bottom" :style="style"></div>
    </ul>
</div>
</body>

<script>
    new Vue({
        el:'#box',
        data:{
            list: [1,2,3,4,5],
            style: {}
        },
        mounted() {
            this.$nextTick(() => {
                const firstLi = this.$refs.tabWrapper.querySelector('li:nth-of-type(1)')
                this.style = {
                    left: firstLi.offsetLeft + 'px',
                    width: firstLi.offsetWidth +'px'
                }
            })
        },
        methods:{
            tabClick(index, e) {
                console.log(e)
                console.log(e.target.offsetWidth)
                console.log(e.target.offsetLeft)
                this.style = {
                    left: e.target.offsetLeft + 'px',
                    width: e.target.offsetWidth +'px'
                }
            }
        }      
    });
</script>
</html>
tab选项卡平滑滚动vue

猜你喜欢
