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%);
		}
	}
相关推荐
hongweihao10 小时前
儿子不收拾玩具,我用AI给他量身定制开发一个APP,这下舒服了
uni-app·app·ai编程
Hashan11 小时前
微信小程序:扁平化的无限级树
前端·微信小程序·uni-app
小徐_233311 小时前
uni-app 无法实现全局 Toast?这个方法做到了!
前端·uni-app
xixixin_12 小时前
【HTML】在页面中画一条0.5px的线
前端·css·uni-app·html·css3
&白帝&12 小时前
Uniapp 自定义头部导航栏
前端·javascript·uni-app
&白帝&13 小时前
Uniapp 条件编译详解
uni-app
xkxnq18 小时前
uniapp跨端性能优化方案
uni-app
速易达网络18 小时前
基于UniApp的新大陆物联网平台温湿度检测系统开发方案
物联网·uni-app
har01d1 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
paopaokaka_luck1 天前
校园快递小程序(腾讯地图API、二维码识别、Echarts图形化分析)
vue.js·spring boot·后端·小程序·uni-app