小程序_底部弹出层

wxml：

<view bindtap='showModal'>点击弹出</view>

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">

<text>我是弹出层的内容</text>

</view>

wxss：

.commodity_screen {
   100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9;
  color: #fff;
}

.commodity_attr_box {
   100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: #fff;
  padding-top: 20rpx;
  height: 300px;
}
.commodity_attr_box{
  text-align: center;
  padding-top: 100rpx;
}

js：

Page({
  data: {
    showModalStatus: false,
    animationData: ''
  },
  onLoad: function () {
   
  },
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "ease-in-out",
      delay: 0
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  hideModal: function () {
    this.setData({
      showModalStatus: false,
    })
  
  }
})