uni-app realizes the drawer view without downloading the plug-in. The rendering is as follows:
image.png
image.png
html code
<template>
<view class="drawer">
<button @click="clickBtn">点击</button>
<!-- self可以理解为跳过冒泡事件，即捕获事件在该元素上发生的方法。 -->
<view class="background" v-if="open" @click.self="closeDrop">
<view class="drop" :class="{ active: isActive, close: isClose }">drop</view>
</view>
</view>
</template>js code
<script>
export default {
data() {
return {
// 抽屉
open: false,
isActive: false,
isClose: false
}
},
onLoad() {
},
methods: {
// 抽屉 s
clickBtn() {
this.open = true;
this.isActive = true;
this.isClose = false;
},
// 控制点击遮罩关闭抽屉
closeDrop() {
this.isClose = true;
setTimeout(() => {
this.open = false;
}, 200);
}
// 抽屉 e
}
}
</script>css code
<style scoped lang="scss">
.background {
// z-index 控制是全屏还是半屏，即是否占顶部导航栏的位置
z-index: 9999;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
// 遮罩颜色
background: rgba($color: #000000, $alpha: 0.5);
.drop {
width: 0px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: #fff;
}
// 开
.active {
animation: opendoor 0.5s normal forwards;
}
// @keyframes 可以创建动画；
// opendoor对应上方active类中animation属性的opendoor
@keyframes opendoor {
from {
width: 0;
}
to {
//打开的抽屉宽度
width: 66%;
}
}
// 关
.close {
animation: close 0.3s normal forwards;
}
// close对应上方close类中animation属性的 close
@keyframes close {
0% {
width: 66%;
}
100% {
width: 0;
opacity: 0;
}
}
}
</style>