Vue实现tab选项卡及内容滑动切换

最新推荐文章于 2025-03-27 15:55:07 发布

置顶 Taojunhao

最新推荐文章于 2025-03-27 15:55:07 发布

阅读量3.8k

点赞数 6

本文链接：https://blog.youkuaiyun.com/weixin_39994522/article/details/111994994

版权

JavaScript 同时被 3 个专栏收录

10 篇文章

订阅专栏

HTML5

5 篇文章

订阅专栏

VUE.js

3 篇文章

订阅专栏

本文介绍如何使用Vue.js不依赖外部插件，原生开发一个选项卡滑动切换功能，同时内容区域也跟随滑动。通过监听触摸事件，实现了平滑的滑动体验。示例代码包括HTML结构、CSS样式和JavaScript逻辑，详细展示了从界面到交互的完整实现过程。项目源码已上传至Gitee，可供参考和下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue实现tab选项卡及内容滑动切换

近期公司要求给产品应用添加详情和评论的展示模块，为了达到用户体验效果，采取切换tab选项卡，联级滑动响应的内容进行展示，并且滑动内容切换tab选项卡。考虑到性能及兼容性问题，放弃采用Swiper等插件，直接使用Vue来进行原生开发。下面上代码。

效果图：
在这里插入图片描述

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

CSS：

       .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;
        }

JS:

	<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>