手势滑动侧边栏 uniapp(vue3)

等风来吖～
已于 2023-10-30 09:04:48 修改
阅读量235
点赞数
分类专栏： vue3封装组件文章标签： uni-app
于 2023-10-30 08:43:56 首次发布
本文链接：https://blog.csdn.net/ZL3064436257/article/details/134111535
版权
vue3封装组件专栏收录该内容
5 篇文章 0 订阅
订阅专栏
手势右滑侧边单淡入出现,主视图缩小右移

效果预览

完整代码

<template>
	<view class="body_without" @touchstart="drawStart" @touchmove="drawMove($event)" @touchend="drawEnd($event)"
		:style="{transform: `translateX(${data_state.translateX}%)`}">
		<!-- 侧边栏 -->
		<view class="body_cont_bar">
			<view class="body_cont_bar_top">
				<view class="imgs">
					<image src="../../static/img.jpg" mode="heightFix"></image>
				</view>
				<view class="">
					<view class="names">
						<text>等风来</text>
						<uni-icons class="icons" type="forward" size="20" color="#879cb8"></uni-icons>
					</view>
					<view class="tips">
						山东随风去科技公司
					</view>
				</view>
			</view>
			<view class="corporation">
				<view class="corporation_item" style="background-color: #2c4267;">
					<view class="l">
						<uni-icons type="hand-up-filled" size="24" color="#3e7ae9"></uni-icons>
					</view>
					<view class="r">
						山东随风去科技公司
					</view>
				</view>
				<view class="corporation_item">
					<view class="l" style="background-color: #31446d;">
						<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
					</view>
					<view class="r">
						创建/加入企业
					</view>
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="body_content" :style="{transform: `scale(${data_state.scale_num})`}">
			<view class="body_content_nav">
				<uni-icons type="list" size="24" color="#fff" @click="shows"></uni-icons>
				<text>消息</text>
				<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
			</view>
			<view class="body_content_top">
				<view class="msg_item" style="background-color: #f6f6f6;">
					<view class="msg_item_l">
						<image src="../../static/img.jpg" mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								等风来
							</view>
							<view class="date">
								54分钟前
							</view>
						</view>
						<view class="msg_item_r_bottom">
							https://www.baidu.com
						</view>
					</view>
				</view>
				<view class="msg_item" style="background-color: #f6f6f6;">
					<view class="msg_item_l">
						<image src="https://pic4.zhimg.com/80/v2-459ba76d097040457a2bea7746c3bf8f_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								吴二狗
							</view>
							<view class="date">
								12分钟前
							</view>
						</view>
						<view class="msg_item_r_bottom">
							最爱你啦~
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic1.zhimg.com/80/v2-67f67619260c19cb3a2afe090942a7e0_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								派大星
							</view>
							<view class="date">
								刚刚
							</view>
						</view>
						<view class="msg_item_r_bottom">
							你好啊
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic2.zhimg.com/80/v2-1c0a4191f20e7cb905dc3cbd91eaf9e9_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								61s
							</view>
							<view class="date">
								20分钟前
							</view>
						</view>
						<view class="msg_item_r_bottom">
							下午有啥工作吗???
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic4.zhimg.com/80/v2-e9899ffc1e2332071c704191cb8cac5f_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								赵小瑞
							</view>
							<view class="date">
								34分钟前
							</view>
						</view>
						<view class="msg_item_r_bottom">
							把接口文档整理一下发我
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic4.zhimg.com/80/v2-5d8291807640b0d39486b7349ca3563b_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								李开心
							</view>
							<view class="date">
								51分钟前
							</view>
						</view>
						<view class="msg_item_r_bottom">
							你是不是有啥大bing
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic4.zhimg.com/80/v2-f04ea444439f839d334584ee2de3108b_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								摆烂崽崽
							</view>
							<view class="date">
								10/26
							</view>
						</view>
						<view class="msg_item_r_bottom">
							摆烂中~
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic2.zhimg.com/80/v2-dde306fbe9622431175235336b45ca15_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								崽崽
							</view>
							<view class="date">
								10/26
							</view>
						</view>
						<view class="msg_item_r_bottom">
							摆烂中~
						</view>
					</view>
				</view>
				<view class="msg_item">
					<view class="msg_item_l">
						<image src="https://pic1.zhimg.com/80/v2-d0d28a80e38772b34e7691cee093df6c_720w.webp"
							mode="heightFix"></image>
					</view>
					<view class="msg_item_r">
						<view class="msg_item_r_top">
							<view class="title">
								皮皮
							</view>
							<view class="date">
								10/26
							</view>
						</view>
						<view class="msg_item_r_bottom">
							摆烂中~
						</view>
					</view>
				</view>
			</view>
			<view class="body_content_tabbar">
				<view class="body_content_tabbar_cont">
					<view class="tabbar_item">
						<view class="tabbar_item_icon">
							<uni-icons type="chatbubble-filled" size="26" color="#427ce8"></uni-icons>
						</view>
						<view class="tabbar_item_text" style="color: #427ce8;">
							消息
						</view>
					</view>
					<view class="tabbar_item">
						<view class="tabbar_item_icon">
							<uni-icons type="email" size="26" color="#53555b"></uni-icons>
						</view>
						<view class="tabbar_item_text">
							邮件
						</view>
					</view>
					<view class="tabbar_item">
						<view class="tabbar_item_icon">
							<uni-icons type="settings-filled" size="26" color="#53555b"></uni-icons>
						</view>
						<view class="tabbar_item_text">
							工作台
						</view>
					</view>
					<view class="tabbar_item">
						<view class="tabbar_item_icon">
							<uni-icons type="person" size="26" color="#53555b"></uni-icons>
						</view>
						<view class="tabbar_item_text">
							我的
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";

	const data_state = reactive({
		touch_X: 0, //触摸位置
		touch_Y: 0, //触摸位置
		translateX: 0, //移动距离
		scale_num: 1
	})

	// 触摸开始
	const drawStart = (e) => {
		data_state.touch_X = e.changedTouches[0].clientX
		data_state.touch_Y = e.changedTouches[0].clientY;
	}

	//触摸中
	const drawMove = (e) => {
		// 触摸结束x轴位置
		let touch_end_X = e.changedTouches[0].clientX;
		let touch_end_Y = e.changedTouches[0].clientY;
		// 结束位置 - 开始位置 
		let diff_X = touch_end_X - data_state.touch_X
		let diff_Y = touch_end_Y - data_state.touch_Y
		console.log(diff_Y);
		if (Math.abs(diff_X) > 50 && diff_Y < 20 && -20 < diff_Y) {
			console.log('结束了');
			if (diff_X > 0 && -20 < diff_Y < 20) {
				// diff大于0超右侧滑动
				data_state.touch_direction = 1
				if (data_state.translateX >= 70) return
				data_state.translateX += 2
				data_state.scale_num -= 0.006
			} else if (diff_X <= 0) {
				//向左滑
				data_state.touch_direction = 0
				if (data_state.translateX <= 0) return
				data_state.translateX -= 2
				if (data_state.scale_num < 1) data_state.scale_num += 0.006
			}
		}
	}

	// 触摸结束
	const drawEnd = (e) => {
		let touch_end_X = e.changedTouches[0].clientX;
		let touch_end_Y = e.changedTouches[0].clientY;
		// 结束位置 - 开始位置 
		let diff_X = touch_end_X - data_state.touch_X
		let diff_Y = touch_end_Y - data_state.touch_Y
		if (Math.abs(diff_X) > 20 && diff_Y < 20 && -20 < diff_Y) {
			if (diff_X > 0) {
				data_state.translateX = 70
				data_state.scale_num = 0.8
			} else if (diff_X <= 0) {
				data_state.translateX = 0
				data_state.scale_num = 1
			}
		}else {
			if(data_state.translateX != 0){
				data_state.translateX = 0
				data_state.scale_num = 1
			}
		}
	}

	// 打开关闭侧边栏
	const shows = () => {
		if (data_state.translateX == 70) {
			data_state.translateX = 0
			data_state.scale_num = 1
		} else {
			data_state.translateX = 70
			data_state.scale_num = 0.8
		}
	}
</script>

<style lang="scss" scoped>
	image {
		height: 100%;
	}

	.body_without {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .7);
		transition: all 0.15s;
		display: flex;
		align-items: center;
		justify-content: center;

		.body_cont_bar {
			position: absolute;
			left: 0;
			top: 0;
			width: 70%;
			height: 100%;
			background-color: #162d56;
			transform: translateX(-100%);
		}

		.body_content {
			width: 100%;
			height: 100%;
			background-color: #f0f0f1;
			transition: all 0.15s;

			.body_content_top {
				height: calc(100% - 100px - env(safe-area-inset-bottom, 50rpx));
				background-color: #fff;
				overflow-y: scroll;
			}

			.body_content_nav {
				width: 100%;
				height: 50px;
				background-color: #4873c1;
				color: #fff;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 3%;
			}

			.body_content_tabbar {
				.body_content_tabbar_cont {
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 50px;
				}

				height: calc(50px + env(safe-area-inset-bottom, 50rpx));
				background-color: #fcfcfc;
				border-top: 1px solid #dee0e2;
				box-sizing: border-box;
				text-align: center;
				font-size: 24rpx;
				color: #53555b;
			}

		}
	}

	.msg_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 25rpx;
		border-bottom: 1px solid #e8e8ea;

		.msg_item_l {
			width: 100rpx;
			height: 100rpx;
			border-radius: 15rpx;
			overflow: hidden;
			margin-right: 25rpx;
		}

		.msg_item_r {
			flex: 1;

			.msg_item_r_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.date {
					font-size: 22rpx;
					color: #c2c3c4;
				}
			}
		}

		.msg_item_r_bottom {
			color: #a8a8a9;
			font-size: 26rpx;
		}
	}

	.body_cont_bar_top {
		margin-top: 100rpx;
		padding: 0 35rpx;
		display: flex;
		align-items: center;

		.imgs {
			width: 110rpx;
			height: 110rpx;
			overflow: hidden;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.names {
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;

		}

		.icons {
			margin-left: 10rpx;
		}

		.tips {
			color: #b2c4db;
			font-size: 26rpx;
		}
	}

	.corporation {
		margin-top: 80rpx;

		.corporation_item {
			padding: 35rpx;
			display: flex;
			align-items: center;

			.l {
				width: 80rpx;
				height: 80rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				margin-right: 35rpx;
			}

			.r {
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
</style>