微信小程序添加购买规格选择时的model

废话不多说直接上代码，后期内容自己添加

1 index.wxml

<!--pages/modle/index.wxml-->
<view class="tool_bottom">
<view class="buy_wrap" bindtap="handleShowModle">购买</view>
</view>

 <!--遮罩  -->
<view class='mask-view' wx:if='{{showModel}}' bindtap='hiddenModal' animation="{{animation_mask}}"></view>
<!-- modal -->
 <!-- 商品信息显示 -->
<view class='specs_swiper_goods_info' animation="{{animation}}">

<view class="tool_bottom">
<view class="buy_wrap" bindtap="handleShowModle">购买</view>
</view>
</view>

2 index.wxss

/* pages/modle/index.wxss */
page {
  background-color: #ccc;
}
.tool_bottom {
  border-top: 2rpx solid #928e8e;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: #ffff;
  display: flex;
  align-content: center;
  justify-content: center;
}
.tool_bottom .buy_wrap {
  display: flex;
}
.mask-view {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0;
}
.specs_swiper_goods_info {
  width: 100%;
  height: 50rpx;
  position: fixed;
  bottom: -100rpx;
  left: 0;
  opacity: 0.9;
  background: #fff;
}

3 最重要的就是 index.js 了

// pages/modle/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showModel:false,
    animation: {}, // 动画
    animation_mask: {}, // 动画
  },

  /* 模态框 */
  handleShowModle(){
    /* 显示模态框 */
    this.showModle();
  },

  /* 显示模态框 */
  showModle(){
    var that=this;

    this.animation_list = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    this.animation_mask = wx.createAnimation({
      duration: 200,
      timingFunction: 'linear',
    })
    if (!this.data.showModal) { //为渲染 进行渲染
      this.setData({
        showModel: true
      })
      // 选中后进行渲染 并设置高度
      const height=340;
      this.animation_list.height(height).step()
      this.animation_mask.opacity(0.2).step()
      that.setData({
        animation: that.animation_list.export(),
        animation_mask: that.animation_mask.export()
      })
    } 
  },
  /* 隐藏模态框 */
hiddenModal(){
  var that = this;
  //去掉高度
  this.animation_list.height(0).step()
  this.animation_mask.opacity(0).step()
  that.setData({
    animation: this.animation_list.export(),
    animation_mask: this.animation_mask.export()
  })
  // 设置定时器 500ms后移除遮罩
  setTimeout(function () {
    // 渲染遮罩
    that.setData({
      showModel: false
    })
  }, 500)
}
})

带内容演示

2020-07-28-21-18-25