uniapp 页面左右滑动切换tab

最新推荐文章于 2024-04-13 16:14:03 发布

小坚果_

最新推荐文章于 2024-04-13 16:14:03 发布

阅读量3k

点赞数 7

分类专栏： uniapp 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/m0_61702149/article/details/126466955

版权

uniapp 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

需求：左右滑动页面，tab和内容跟着变化

直接上代码（想看效果的可以直接粘贴，不会报错）

<template>
	<view class="pages" @touchstart="touchStart" @touchend="touchEnd">
		<view class="title">
			<view class="e_title" v-for="(item,index) in list1" :key="index"
				@click.stop="e_click(index)">
				<view :class="num === index ? 'title_fw_big' : 'title_color'">{{item}}</view>
			</view>
		</view>
		<view class="content" v-if="num == 0">内容1</view>
		<view class="content" v-if="num == 1">内容2</view>
		<view class="content" v-if="num == 2">内容3</view>
	</view>
</template>  
<script>  
    export default {  
        data() {  
            return {  
				list1: ['标签1', '标签2', '标签3'],
				num: 0,
                touchStartX: 0,  // 触屏起始点x  
                touchStartY: 0,  // 触屏起始点y  
            };  
        },  
        methods: {  
			e_click(index) {
				this.num = index;
			},
            /**  
            * 触摸开始  
            **/  
            touchStart(e) {  
                // console.log("触摸开始")  
                this.touchStartX = e.touches[0].clientX;  
                this.touchStartY = e.touches[0].clientY;  
            },  

            /**  
            * 触摸结束  
            **/  
            touchEnd(e) {  
                // console.log("触摸结束")  
                let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
				console.log(deltaX,deltaY,Math.abs(deltaX),Math.abs(deltaY));
                if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                    if (deltaX >= 0) {  
                        console.log("右滑")  
						if(this.num == 0 ){
							this.num = 0
							// 如果等于0  有别的需求(比如网络请求啥的都可以写)
						}else if(this.num == 1 ){
							this.num = 0
						}else if(this.num == 2 ){
							this.num = 1
						}
                    } else {  
                        console.log("左滑")  
						if(this.num == 0 ){
							this.num = 1
						}else if(this.num == 1 ){
							this.num = 2
						}else if(this.num == 2 ){
							this.num = 2
						}
                    }  
                } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
                    if (deltaY < 0) {  
                        console.log("上拉")  
                    } else {  
                        console.log("下拉")  
                    }  
                } else {  
                    console.log("可能是点击！")  
                }  
            },            
        }  
    };  
</script>
<style scoped>
	.pages{
		width: 100%;
		height: 100vh;
		background-color: #F0F0F0;
	}
	.title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80rpx;
		background: #B3D66E;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	.e_title {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 15rpx 20rpx;
		font-weight: 300;
	}
	.title_color {
		font-size: 24rpx;
		color: #969696;
	}
	
	.title_fw_big {
		font-size: 30rpx;
		font-weight: bold;
		color: #191919;
		border-bottom: 8rpx solid #F0AD4E;
	}
	.content{
		margin-top: 80rpx;
		width: 100%;
		height: calc(100vh - 80rpx);
		background-color: #FE726B;
		text-align: center;
		font-size: 100rpx
	}
</style>