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

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

Taojunhao

3589人浏览 · 2020-12-30 17:22:30

Taojunhao · 2020-12-30 17:22:30 发布

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>

项目地址：https://gitee.com/taojunhao/tabChange
如有需要可自行下载。
希望对大家有帮助。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^