手机网站左侧弹出菜单功能-uniapp

效果图

     

 

 

<template>
	<view class="drawer" :class="{ moveRight: isActive, moveLeft: isClose }">

		<uni-nav-bar dark shadow background-color="#007AFF" status-bar :left-icon="left_icon" left-text="" title="学校模板"
			@clickLeft="clickBtn" />

		<!-- self可以理解为跳过冒泡事件，即捕获事件在该元素上发生的方法。 -->
		<view class="background" v-if="open" @click="closeDrop">
			<view class="drop" :class="{ active: isActive, close: isClose }">drop</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				open: false,
				isActive: false,
				isClose: false,
				left_icon: "list",
			}
		},
		methods: {

			clickBtn() {
				this.open = true;
				this.isActive = true;
				this.isClose = false;
				this.left_icon = "closeempty";
			},
			// 控制点击遮罩关闭抽屉
			closeDrop() {
				this.isClose = true;
				setTimeout(() => {
					this.open = false;
					this.left_icon = "list";
				}, 200);
			}


		}
	}
</script>

<style scoped lang="scss">
	.moveRight {
		animation: bodyMoveRight 0.5s normal forwards;
	}

	@keyframes bodyMoveRight {
		from {
			margin-left: 0;
		}

		to {
			//打开的抽屉宽度
			margin-left: 40%;
		}
	}

	.moveLeft {
		animation: bodyMoveLeft 0.3s normal forwards;
	}

	@keyframes bodyMoveLeft {
		0% {
			margin-left: 40%;
		}

		100% {
			margin-left: 0;

		}
	}

	.background {
		// z-index 控制是全屏还是半屏，即是否占顶部导航栏的位置
		z-index: 9999;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		// 遮罩颜色
		background: rgba($color: #fff, $alpha: 0.0);

		.drop {
			width: 0px;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			background: #fff;
		}

		// 开
		.active {
			animation: opendoor 0.5s normal forwards;
		}


		// @keyframes 可以创建动画；
		// opendoor对应上方active类中animation属性的opendoor
		@keyframes opendoor {
			from {
				width: 0;
			}

			to {
				//打开的抽屉宽度
				width: 40%;
			}
		}


		// 关
		.close {
			animation: close 0.3s normal forwards;
		}

		// close对应上方close类中animation属性的 close
		@keyframes close {
			0% {
				width: 40%;
			}

			100% {
				width: 0;
				opacity: 0;
			}
		}


	}
</style>