微信小程序实现弹出模态框窗

最新推荐文章于 2024-09-09 14:49:05 发布

dejavuluuu

最新推荐文章于 2024-09-09 14:49:05 发布

阅读量680

点赞数 1

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/weixin_64015095/article/details/124649855

版权

实现方式

wxml代码

 <!--wxml弹出框  -->
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
 <view style="display: flex;flex-direction: column;background-color: green;">
<view>texy</view>
<view>saksg</view>
</view>
   </view>
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

js代码

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

wxss样式

/*wxss*/
 .commodity_attr_box {
    position: fixed;
   top: 0;
    width: 750rpx;
    background: white;
    transform: translateY(150%);
    transition: all 0.4s ease;
    z-index: 11;
  }
  .commodity_screen{
    /*
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    display: none;
  */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.2;
    overflow: hidden;
    z-index: 1;
    color: #fff;
  }