效果图
组件
bottomFrame.wxml
<view wx:if='{{flag}}'>
<view class='wrap {{wrapAnimate}}' style='background:rgba(0,0,0,{{bgOpacity}});'></view>
<view catchtap='hideFrame' class='frame-wrapper {{frameAnimate}}'>
<view catchtap='catchNone' class='frame'>
<!-- 标题 -->
<view class='title-wrapper flex'>
<view>{{frameTitle}}</view>
<image catchtap='hideFrame' src='/image/compare-cuo.png' mode='widthFix'></image>
</view>
<!-- 内容 -->
<slot></slot>
</view>
</view>
</view>
bottomFrame.wxss
.wrapAnimate{animation: wrapAnimate 0.5s ease-in-out forwards}
@keyframes wrapAnimate{
0%{}
100%{background:rgba(0,0,0,0.35);}
}
.wrapAnimateOut{animation: wrapAnimateOut 0.4s ease-in-out forwards}
@keyframes wrapAnimateOut{
0%{background:rgba(0,0,0,0.35);}
100%{background:rgba(0,0,0,0);}
}
.frameAnimate{animation: frameAnimate 0.5s ease forwards;}
@keyframes frameAnimate{
0%{}
100%{opacity: 1;top:0vh;}
}
.frameAnimateOut{animation: frameAnimateOut 0.4s ease forwards;}
@keyframes frameAnimateOut{
0%{opacity: 1;top:0vh;}
100%{opacity: 0;top:100vh;}
}
.frame-wrapper{position: fixed;height:100vh;width:100vw;z-index: 2;top: 50vh;}
.frame{background: #fff;position: absolute;bottom: 0;width: 88.2vw;padding: 5.9vw 5.9vw 0;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;z-index: 3;}
.title-wrapper{justify-content: space-between;font-size: 4.9vw;color: #4a4a4a;margin-bottom: 5.9vw;}
.title-wrapper>image{width:3.2vw;height:3.2vw;padding:0 5vw;margin-right:-5vw;}
.flex{display: flex;align-items: center;}
.wrap{position: fixed;z-index: 1;top: 0;left: 0;right: 0;bottom: 0;}
bottomFrame.json
{
"component": true,
"usingComponents": {}
}
bottomFrame.js
Component({
properties: {
},
data: {
flag:false,
wrapAnimate:'wrapAnimate',
bgOpacity:0,
frameAnimate:'frameAnimate',
},
properties: {
frameTitle: {
type: String,
value: '标题',
}
},
methods: {
showFrame() {
this.setData({ flag: true, wrapAnimate: 'wrapAnimate', frameAnimate: 'frameAnimate' });
},
hideFrame() {
const that= this;
that.setData({ wrapAnimate: 'wrapAnimateOut', frameAnimate: 'frameAnimateOut' });
setTimeout(()=>{
that.setData({ flag: false})
},400)
},
catchNone(){
//阻止冒泡
},
_showEvent() {
this.triggerEvent("showEvent");
},
_hideEvent() {
this.triggerEvent("hideEvent");
}
}
})
引用
index.wxml
<button bindtap='popup'>底部弹框按钮</button>
<bottomFrame id="bottomFrame" frameTitle="这是标题" >
<view class='text'>text-1</view>
<view class='text'>text-2</view>
<view class='text'>text-3</view>
</bottomFrame>
index.json
{
"navigationBarTitleText":"底部弹框组件",
"usingComponents": {
"bottomFrame":"/components/bottomFrame/bottomFrame"
}
}
index.js
Page({
popup(){
this.selectComponent('#bottomFrame').showFrame();
},
})