tab栏滑动切换

<!doctype html>
<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>
    <!-- ui-base.css -->
    <link rel="stylesheet" href="style/ui-base.css" />
    <!-- ui-common.css -->
    <link rel="stylesheet" href="style/ui-common.css" />
    <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>
</head>

<body>
    <div id="view" class="view i-view col ft-30" v-cloak>
        <!-- nav -->
        <div class="tab-box bc-fff">
            <div class="tab-item-box overflow-x">
                <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 class="bottom-line"></div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="content-box" @touchStart="touchStart" @touchmove="touchmove" @touchend="touchend">
                <div class="content-item" v-for="(item, index) in dataList" :key="index">{{item}}</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="script/vuejs/vue.min.js"></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</body>
<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>

</html>

<!doctype html>
<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>
    <!-- ui-base.css -->
    <link rel="stylesheet" href="style/ui-base.css" />
    <!-- ui-common.css -->
    <link rel="stylesheet" href="style/ui-common.css" />
    <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>
</head>

<body>
    <div id="view" class="view i-view col ft-30" v-cloak>
        <!-- nav -->
        <div class="tab-box bc-fff">
            <div class="tab-item-box overflow-x">
                <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 class="bottom-line"></div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="content-box" @touchStart="touchStart" @touchmove="touchmove" @touchend="touchend">
                <div class="content-item" v-for="(item, index) in dataList" :key="index">{{item}}</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="script/vuejs/vue.min.js"></script>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</body>
<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>

</html>

posted @ 2022-08-08 09:46 小忱阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

overspread

tab栏滑动切换

公告