微信小程序抽屉

<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    <view class="commodity_tit"><text class="comtittext">这里写标题</text>
        <view class="clenrbox" bindtap="hideModal">
            <image class="clenr" src="/Images/communitysafety/clenr.png" mode="" />
        </view>
    </view>
    <!--这里写内容  -->
    <view class="contbox">
        
    </view>
</view>

  showModal() {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
    });
    this.animation = animation;
    animation.translateY(300).step();
    this.setData({
      animationData: animation.export(),
      showModalStatus: true,
    });
    setTimeout(
      function () {
        animation.translateY(0).step();
        this.setData({
          animationData: animation.export(),
        });
      }.bind(this),
      100
    );
  },
  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
    });
    this.animation = animation;
    animation.translateY(300).step();
    setTimeout(
      function () {
        animation.translateY(0).step();
        this.setData({
          animationData: animation.export(),
          showModalStatus: false,
        });
      }.bind(this),
      100
    );
  },

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  height: 70%;
  width: 100%;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}
.commodity_tit {
  height: 10%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(245, 245, 245);
  color: #777777;
  position: relative;
}

.clenrbox {
  position: absolute;
  right: 20px;
  height: 18px;
  width: 18px;
}
.clenr {
  display: block;
  width: 100%;
  height: 100%;
}