原文地址：https://www.jb51.net/article/143467.htm

效果图

  1. <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
  2. <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>

css

  1. .commodity_screen {
  2.  width: 100%;
  3.  height: 100%;
  4.  position: fixed;
  5.  top: 0;
  6.  left: 0;
  7.  background: #000;
  8.  opacity: 0.2;
  9.  overflow: hidden;
  10.  z-index: 1000;
  11.  color: #fff;
  12. }
  13.  
  14. .commodity_attr_box {
  15.  width: 100%;
  16.  overflow: hidden;
  17.  position: fixed;
  18.  bottom: 0;
  19.  left: 0;
  20.  z-index: 2000;
  21.  background: #fff;
  22.  padding-top: 20rpx;
  23. }

js

  1. showModal: function () {
  2.  // 显示遮罩层
  3.  var animation = wx.createAnimation({
  4.   duration: 200,
  5.   timingFunction: "linear",
  6.   delay: 0
  7.  })
  8.  this.animation = animation
  9.  animation.translateY(300).step()
  10.  this.setData({
  11.   animationData: animation.export(),
  12.   showModalStatus: true
  13.  })
  14.  setTimeout(function () {
  15.   animation.translateY(0).step()
  16.   this.setData({
  17.    animationData: animation.export()
  18.   })
  19.  }.bind(this), 200)
  20. },
  21. hideModal: function () {
  22.  // 隐藏遮罩层
  23.  var animation = wx.createAnimation({
  24.   duration: 200,
  25.   timingFunction: "linear",
  26.   delay: 0
  27.  })
  28.  this.animation = animation
  29.  animation.translateY(300).step()
  30.  this.setData({
  31.   animationData: animation.export(),
  32.  })
  33.  setTimeout(function () {
  34.   animation.translateY(0).step()
  35.   this.setData({
  36.    animationData: animation.export(),
  37.    showModalStatus: false
  38.   })
  39.  }.bind(this), 200)
  40. }

 

版权声明：本文为luckyting原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/luckyting/articles/9645453.html