微信小程序の底部弹框动画
先上效果图
笔者不喜欢过多累赘的描述,直接上复制黏贴即可用的代码。
wxml 代码
<view class='maskLayer' wx:if="{{showBox}}" bindtap='hideModal'></view>
<view class='main-box' wx:if="{{showBox}}">
<view style='padding:0 10% 30rpx 10%'>
<view style='font-weight: bold;color:#fa882f'>弹框标题</view>
<view class='box-little-title'>弹框附录</view>
<view class="box-view">
主要内容部分
</view>
<button class='box-submit' bindtap='donatePower'>底部按钮</button>
</view>
</view>
wxss 代码
.maskLayer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
.main-box {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 20rpx;
border-radius: 15rpx 15rpx 0 0;
letter-spacing: 3rpx;
}
.box-little-title {
margin-top: 30rpx;
color: #dbdada;
word-break: keep-all;
word-wrap: break-word;
font-size: 28rpx;
}
.box-submit {
background-color: #fa882f;
border-radius: 0;
color: white;
padding-bottom: 20rpx;
}
.box-view {
margin-bottom: 20rpx;
margin-top: 20rpx;
}
js代码
data 中加入 showBox 变量。
hideModal: function() {
this.setData({
showBox: false
})
},
showModal: function() {
this.setData({
showBox: true
})
}