- 需求:
由于目前 iOS 端有 bug,所以手写了一个媒体菜单栏组件,要实现的需求为菜单栏黑色透明背景渐现,底部媒体菜单栏上滑出现。 - 我的实现:
<template>
<div class="container">
<div class="menu-list-mask" :class="{'opacity-50': show}" @tap="menuItemTap(menuList.length - 1)"></div>
<div class="menu-list-wrapper" :class="{'bottom-0': show}">
<block v-for="(item, index) of menuList" :key="index">
<view class="menu-item" @tap="menuItemTap(index)">
{{item}}
</view>
</block>
</div>
</div>
</template>
<script>
export default {
props: {
menuList: {
type: Array,
default: function() {
return []
}
},
show: {
type: Boolean,
value: false
}
},
methods: {
menuItemTap(index) {
console.log(index)
this.$emit('menuItemTap', index)
}
}
}
</script>
<style>
.container {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0);
z-index: 10000;
}
.menu-list-mask {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: opacity 0.3s ease;
}
.menu-list-wrapper {
position: absolute;
width: 100%;
bottom: -200px;
transition: bottom 0.3s ease;
}
.menu-item {
width: 100%;
height: 49px;
line-height: 49px;
text-align: center;
background: #fff;
font-size: 36rpx;
box-sizing: border-box;
border-bottom: 0.5px solid #ECECEC;
}
.menu-item:nth-child(2) {
height: 55px;
line-height: 49px;
border-bottom: 6px solid #EFEFF4;
}
.opacity-50 {
opacity: 0.5;
}
.bottom-0 {
bottom: 0;
}
</style>
- 结果:
组件出现时没有触发过渡动画
PS:以上是编译在 H5 端,小程序端用 showActionSheet Api 实现。以上组件内部用 style 绑定也试过,组件外部使用时用 v-if 和 v-show 分别尝试过,都没有效果。
0 个回复