小程序自定义底部弹窗

小程序自定义底部弹窗

话不多说直接上代码

WXML部分

<view class="wrap" hidden="{{!visible}}">
  <view class="mask {{visible ? 'mask-show' : ''}}" hidden="{{!visible}}" bindtap="_onHidden"></view>
  <view class="box" id="my-modal-box" animation="{{animationData}}">
    <slot />
  </view>
</view>

下面中的isFooterBtn是在工作中一个特殊的样式，需要把底部按钮露出来不需要可以删除
JS部分

Component({
  properties: {
    myVisible: {
      type: Boolean,
      value: false,
      observer: '_visibleChange',
    },
    isFooterBtn: {
      type: Boolean,
      value: false,
    }
  },

  data: {
    visible: false,
    animation: null,
    animationData: null,
  },


  methods: {
    _visibleChange: function (newValue) {
      newValue ? this._onShow() : this._onHidden()
    },
	// 显示
    _onShow: function () {
      var animation = wx.createAnimation({
        duration: 400,
        timingFunction: "linear",
        delay: 0,
      })
      
      animation.translateY(500).step()
      this.setData({
        visible: true,
        animationData: animation.export(),
      })
      setTimeout(function () {
        animation.translateY(this.properties.isFooterBtn ? -56 : 0).step()
        this.setData({
          animationData: animation.export(),
        })
      }.bind(this), 400)
    },
	
	//隐藏
    _onHidden: function () {
      var animation = wx.createAnimation({
        duration: 400,
        timingFunction: "linear",
        delay: 0,
      })
      animation.translateY(500).step()
      this.setData({
        animationData: animation.export(),
      })
      setTimeout(function () {
        this.setData({
          visible: false
        })
        this.triggerEvent('myOnCancel');
      }.bind(this), 400)
    },
  },
})

CSS部分

.wrap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 98;
  width: 100vw;
  height: 100vh;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}
.mask-show {
  opacity: 0.4;
}

.box {
  position: fixed;
  top: 100vh;
  left: 0;
  z-index: 2;
  width: 100%;
  min-height: 100rpx;
  background: #fff;
}

引入使用

json部分

"usingComponents": {
    "timeModal": "/component/my-model/index"
  }

wxml部分

<timeModal myVisible="{{timeVisible}}" bindmyOnCancel="timeHidden">
//里面写入你需要展示的样式
</timeModal>

js部分

data: {
    visible: false
  },
  
  // 时间显示
  timeShow: function () {
    this.setData({
      visible: true,
    })
  },

  // 时间隐藏
  timeHidden: function () {
    this.setData({
      visible: false
    });
  },

也是拿的网上的代码改成自己需要的