微信小程序の底部彈框動畫

先上效果圖

筆者不喜歡過多累贅的描述，直接上覆制黏貼即可用的代碼。

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
  })
}