微信小程序自定义底部弹框

最新推荐文章于 2024-08-15 23:03:45 发布

山小雨

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量3.6k

点赞数 3

分类专栏：微信小程序文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/qq_26905845/article/details/82982097

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该弹框自底部向上滑动弹出，同时蒙板添加透明的动画，点击蒙版，弹框下滑，蒙板渐变消失

wxml

<view class="modals">
    <view class="mask" bindtap="hideModal" animation="{{animationMask}}"></view>
    <view class="content bottom-pos" animation="{{animationData}}">布局内容</view>
</view>

<button class='btn' bindtap="showModal">点我</button>

wxss

/*模态框*/
.btn{
  z-index: 1002
}
.modals {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mask {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0
}

.content {
  position: absolute;
  z-index: 1001;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  height: 300rpx;
  background-color: #fff;
}

/*动画前初始位置*/

.bottom-pos {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

Page({
  data: {
    animationData: {}, //内容动画
    animationMask: {} //蒙板动画
  },
  onLoad: function() {
    this.animateTrans = wx.createAnimation({
      duration: 600,
      timingFunction: 'ease',
    })

    this.animateFade = wx.createAnimation({
      duration: 600,
      timingFunction: 'ease',
    })
  },

  // 显示
  showModal: function() {
    this.animateTrans.translateY(0).step()
    this.animateFade.opacity(1).step()
    this.setData({
      animationData: this.animateTrans.export(), //动画实例的export方法导出动画数据传递给组件的animation属性
      animationMask: this.animateFade.export()
    })
  },

  // 隐藏
  hideModal: function() {
    this.animateTrans.translateY(300).step()
    this.animateFade.opacity(0).step()
    this.setData({
      animationData: this.animateTrans.export(),
      animationMask: this.animateFade.export()
    })
  }

})