위챗 애플릿 구매 규격 선택 시 모델 추가

쓸데없는 말은 하지 말고 코드에 직접 올리고, 후기 내용은 스스로 추가한다.

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