微信小程序底部弹出模态框

迷南。 2021-09-20 08:32 552阅读 0赞

若有疑问请加qq群:581478349；

承接小程序开发，web开发

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

wxml:

<view class="modals modals-bottom-dialog" hidden="{
       {hideModal}}">
        <view class="modals-cancel" bindtap="hideModal"></view>
        <view class="bottom-dialog-body bottom-pos" animation="{
       {animationData}}"></view>
    </view>
    <button bindtap="showModal">点击弹出底部模态框</button>

wxss:

/*模态框*/
    .modals {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .modals-cancel {
      position: absolute;
      z-index: 1000;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .bottom-dialog-body {
      position: absolute;
      z-index: 10001;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 30rpx;
      height: 300rpx;
      background-color: #fff;
    }
    /*动画前初始位置*/
    .bottom-pos {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }

js:

Page({
      data: {
        hideModal: true, //模态框的状态  true-隐藏  false-显示
        animationData: {},
      },
    
      // 显示遮罩层
      showModal: function () {
        var that = this;
        that.setData({
          hideModal: false
        })
        var animation = wx.createAnimation({
          duration: 600,//动画的持续时间 默认600ms   数值越大，动画越慢   数值越小，动画越快
          timingFunction: 'ease',//动画的效果 默认值是linear
        })
        this.animation = animation
        setTimeout(function () {
          that.fadeIn();//调用显示动画
        }, 200)
      },
    
      // 隐藏遮罩层
      hideModal: function () {
        var that = this;
        var animation = wx.createAnimation({
          duration: 800,//动画的持续时间 默认800ms   数值越大，动画越慢   数值越小，动画越快
          timingFunction: 'ease',//动画的效果 默认值是linear
        })
        this.animation = animation
        that.fadeDown();//调用隐藏动画   
        setTimeout(function () {
          that.setData({
            hideModal: true
          })
        }, 720)//先执行下滑动画，再隐藏模块
    
      },
    
      //动画集
      fadeIn: function () {
        this.animation.translateY(0).step()
        this.setData({
          animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
        })
      },
      fadeDown: function () {
        this.animation.translateY(300).step()
        this.setData({
          animationData: this.animation.export(),
        })
      },
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190626142833413.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70