uniapp抽屉滑动效果

typescript 复制代码

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
	<view class="button-group">
		<button type="primary" @click="toggleDrawer">登录</button>
	</view>

	<!-- 抽屉 -->
	<view v-if="drawerVisible" class="drawer">
		<view class="drawer-content">
			<text>这是抽屉的内容</text>
			<button @click="toggleDrawer">关闭</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '',
				drawerVisible: false // 控制抽屉显示状态
			}
		},
		methods: {
			toggleDrawer() {
				this.drawerVisible = !this.drawerVisible;
			}
		}
	}
</script>

使用v-if判当前的drawerVisible状态

在js中先初始化为false

下面是CSS代码

css 复制代码

.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1; /* 使content占据剩余空间 */
	}

	.logo {
		height: 200rpx;
		width: 600rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.button-group {
		position: fixed;
		width: 100%;
		bottom: 150rpx;
		display: flex;
		justify-content: center;
	}

	button {
		width: 60%;
	}

	/* 抽屉背景遮罩 */
	.drawer {
		position: fixed;/*固定*/
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: flex-end;/*将内容垂直对齐到容器的底部，使抽屉从底部弹出*/
		z-index: 1000;/*将元素前移*/
		animation: fadeIn 0.3s ease;/*0。3秒淡入显示*/
	}

	/* 抽屉内容 */
	.drawer-content {
		background-color: #fff;
		width: 100%;
		padding: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		animation: slideUp 0.3s ease;/*应用slideUp动画，使抽屉内容区域在0.3秒内从底部滑入应用slideUp动画，使抽屉内容区域在0.3秒内从底部滑入*/
	}

	/* 淡入效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;/*动画开始时，元素的透明度为0（完全透明）*/
		}
		to {
			opacity: 1;
		}
	}

	/* 滑入效果 */
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	/* 滑出效果 */
	@keyframes slideDown {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(100%);
		}
	}