微信小程序之抽屉

微信小程序之抽屉

wxml
css
js
wxml

// A`n highlighted block
<view  data-status="open"  bindtap="handleShowTecModelClick">抽屉</view>
<view class="mask" data-status="close" wx:if="{{model}}" bindtap='handleCancelTecClick'></view>
<view animation="{{animationData}}" class="drawer-box" wx:if="{{model}}">
    <view class="mark-box">抽屉内容</view>
  <view class="footer-button">
        <view   bindtap='handleCancelTecClick' data-status="close">取消</view>
        <view   bindtap="handleChangeTecClick" data-status="close">确定</view>
    </view>
</view>

css

// An highlighted block
/* 抽屉 */
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1;
  opacity: 0.7;
}
 .drawer-box{
  height: 300rpx;
  background: #fff;
}
.mark-box{
  background: #fff;
  padding: 20rpx 20rpx 10rpx;
  border-radius: 16rpx;
}
.choose-view{
  margin-top: 20rpx;
  background: #f9e5da;
  border-radius: 16rpx;
  padding: 20rpx;
}
.border-bottom{
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.footer-button{
  width: 710rpx;
  background: #fff;
  padding: 20rpx;
  position: absolute;
  bottom: 0;
}
.btn{
  padding: 0 30rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
}
.btn:first-child{
  margin-right: 20rpx;
}

js

// An highlighted block
data: {
    model:false, 
},
 handleShowTecModelClick:function(e){
    this.initModel(e.currentTarget.dataset.status)
  },
  handleCancelTecClick:function(e){
    this.initModel(e.currentTarget.dataset.status)
  },
initModel: function (status) {
    var animation = wx.createAnimation({
      duration: 100,  
      timingFunction: "linear", 
      delay: 0  
    })
    this.animation = animation;
    animation.translateY(150).step();
    this.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation
      })
      if (status == "close") {
            this.setData({
              model: false
            })
        }
    }.bind(this), 100)
    if (status == "open") {
        this.setData({
          model: true
        })
    }
  },