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

最新推荐文章于 2023-09-23 00:14:29 发布

置顶 Taojunhao

最新推荐文章于 2023-09-23 00:14:29 发布

阅读量3.3k

点赞数 5

本文链接：https://blog.csdn.net/weixin_39994522/article/details/111994994

版权

JavaScript 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

VUE.js

3 篇文章 0 订阅

订阅专栏

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
如有需要可自行下载。
希望对大家有帮助。

Taojunhao

关注

5
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Vue实现tab选项卡及内容滑动切换

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

扫一扫