tab 栏进行滑动切换

tab栏进行滑动切换

html

<head>
    <meta charset="utf-8" />
    <title>tab滑动选项卡</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>

<a :class="['tab-item','ft-28','t-center', cur == index ? 'active' : '']" href="javascript:;"

v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">{{item}}</a>

</div>

</div>

</body>

style

<style>
        .tab-box {
            width: 100%;
            height: 1rem;
        }


        .tab-item-box {
            width: 100%;
            height: 100%;
            white-space: nowrap;
            position: relative;
        }


        .tab-item-box::-webkit-scrollbar {
            width: 0;
            height: 0;
        }


        .tab-item-box {
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;
        }


        .bottom-line {
            position: absolute;
            width: .5rem;
            height: .08rem;
            background-color: #147ae2;
            bottom: 0;
            left: 0;
            margin-left: 0.5rem;
            border-radius: .1rem;
            transition: left .5s;
        }


        .tab-item {
            display: inline-block;
            width: 1.5rem;
            line-height: 1rem;
        }


        a.active {
            color: #147ae2;
        }


        .content {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }


        .content-box {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            transition: left .5s;
        }


        .content-item {
            display: inline-block;
            width: 7.5rem;
            height: 100%;
            float: left;
        }
    </style>

script

<script type="text/javascript">
    let vm = new Vue({
        el: '#view',
        data: {
            cur: null,
            tabList: [1, 2, 3, 4, 5, 6],
            dataList: [1, 2, 3, 4, 5, 6],
            startX: null,
            moveX: null,
            index: 0
        },
        mounted() {
            var itemWidth = document.querySelector(".content-item").offsetWidth;
            document.querySelector(".content-box").style.width = itemWidth * this.dataList.length + 'px';
        },
        methods: {
            changeTab(index) {
                this.cur = index;
                this.setMove(index);
            },
            /**
             * 设置偏移
             */
            setMove(index) {
                var itemWidth = document.querySelector(".content-item").offsetWidth;
                var bottomLineWidth = document.querySelector(".tab-item").offsetWidth;
                document.querySelector(".bottom-line").style.left = (bottomLineWidth * (index)) + 'px';
                document.querySelector(".content-box").style.left = -(itemWidth * (index)) + 'px';
            },
            /**
             *  触摸开始事件
             */
            touchStart(e) {
                this.startX = e.touches[0].clientX;
            },
            /**
             *  触摸移动事件
             */
            touchmove(e) {
                this.moveX = e.touches[0].clientX;
            },
            /**
             *  触摸结束事件
             */
            touchend(e) {
                e.preventDefault();
                if (this.moveX - this.startX > 0) {
                    this.index = this.index - 1;
                    this.cur = this.index;
                    if (this.index >= 0) {
                        this.setMove(this.index);
                    } else {
                        this.index = 0;
                        this.cur = 0;
                    }
                } else {
                    this.index = this.index + 1;
                    if (this.index >= this.dataList.length - 1) {
                        this.index = this.dataList.length - 1;
                    }
                    this.setMove(this.index);
                    this.cur = this.index;
                }
            }
        },


    });


</script>

posted @ 2022-08-05 16:23 小忱阅读(164) 评论(0) 收藏举报

刷新页面返回顶部

overspread

tab 栏进行滑动切换

tab栏进行滑动切换

html

style

script

公告