uniapp页面布局

蜡笔大杺

已于 2023-03-11 11:43:55 修改

阅读量1.9k

点赞数

分类专栏：笔记文章标签： uni-app javascript css3 vue.js

于 2022-09-06 11:23:09 首次发布

本文链接：https://blog.csdn.net/qq_44871531/article/details/126721279

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了一个在项目中常见的布局实现，当点击红色圆圈时，会出现可滑动关闭的左右两侧布局。主要通过定位和transform属性控制布局显示，同时使用触摸事件监听滑动操作来实现关闭功能。代码示例中详细展示了Vue组件的结构和样式设置。

摘要由CSDN通过智能技术生成

记录一个布局实现，在项目中还是能经常遇到的。

在这里插入图片描述

如上图所示，当我们点击红色圆圈时，他会出现左右两边的布局，滑动或者点击右侧都会关闭

思路如下

左边的盒子实际是不占位的，对他用了定位，position: absolute;是他悬浮了而已，只是用了
transform: scale(1) translateX(-100%);控制左右的位置而已。
实际主要控制的是右侧框，详细代码如下

<template>
	<view>
		<view class="one" :style="{'backgroundImage': show ? `url(${BackgroundImage})` : '#FFFFFF',}">
			<view :class="['zuo',show ?'lefts':'left']">
				这是侧边栏
				<slot name="sidebar"></slot>
			</view>
			<view :class="['you',show ?'rights':'right']" @touchstart="touchStart" @touchend="touchEnd">
				<view style="height: 100vh;">
					<slot></slot>
					<view class="photo" @click="show=true" @click.stop>
						点击展开
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				BackgroundImage: "/static/back.png",
				show: false,
				startTime: 0,
				startPosition: 0,
				endPosition: 0,
			}
		},
		methods: {
			getShow() {
				console.log(11111);
				this.show = false
			},
			// 起点
			touchStart(event) {
				let that = this;

				if (!that.show) return;

				that.startTime = Date.now();
				that.startPosition = event.changedTouches[0].clientX;
			},
			// 终点,计算移动距离
			touchEnd(event) {
				let that = this;

				if (!that.show) return;

				const endTime = Date.now()
				if (endTime - that.startTime > 2000) {
					return;
				}
				that.endPosition = event.changedTouches[0].clientX

				//当移动距离超过10时判断左滑右滑。
				console.log("Math.abs(that.endPosition - that.startPosition)", Math.abs(that.endPosition - that
					.startPosition));
				if (Math.abs(that.endPosition - that.startPosition) > 100) {
					that.endPosition = event.changedTouches[0].clientX
					var elePosition = that.endPosition - that.startPosition > 0 ? "right" : "left"
				}
				if (Math.abs(that.endPosition - that.startPosition) == 0) {
					console.log(22222);
					that.show = false;
				}

				if (elePosition == "left") {
					that.show = false;
				}
			},

		}
	}
</script>
<style lang="scss">
	.photo {
		border: 1px solid red;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}

	.one {
		overflow: hidden;
	}

	.zuo {
		position: absolute;
		width: 50%;
		height: 100%;
		border: 1px solid red;
	}

	.you {
		position: relative;
		width: 100%;
		height: 100%;
		border: 1px solid blue;
		overflow: hidden;
	}

	.left {
		transform: scale(1) translateX(-100%);
	}

	.right {
		transform: scale(1) translateX(0);
	}

	.lefts {
		transform: translateX(0);
	}

	.rights {
		transform: scale(0.7) translateX(60%);
		box-shadow: 0 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		overflow: hidden;
	}
</style>