微信小程序の底部弹框动画

先上效果图

笔者不喜欢过多累赘的描述，直接上复制黏贴即可用的代码。

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='hideModal'>底部按钮</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
  })
}