小程序中自定义从底部弹出框的组件，然后在主页面中使用

组件wxml

<!--components/del-dialog/index.wxml-->
<view wx:if="{{showModalStatus}}" class="dialog-bg">
  <view animation="{{animationData}}" wx:if="{{showModalStatus}}" class="dialog-content">
    <view class="txt-content">
      <view class="title-txt">确认解除绑定</view>
      <view bindtap="clickHandler" class="sure-btn">解除绑定</view>
    </view>
    <view bindtap="clickHandler" class="cancle-btn">取消</view>
  </view>
</view>

组件wxss

/* components/del-dialog/index.wxss */
.dialog-bg {
  background: rgba(0, 0, 0, .5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.dialog-content {
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  bottom: 20rpx;
}

.txt-content {
  background: white;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title-txt {
  text-align: center;
  width: 100%;
  color: #a2a3a3;
  font-size: 25rpx;
  padding: 35rpx 0;
  border-bottom: 1rpx solid #eff0f0;
}

.sure-btn {
  text-align: center;
  width: 100%;
  color: #c4996a;
  font-size: 40rpx;
  padding: 30rpx 0;
}

.cancle-btn {
  margin-top: 16rpx;
  background: white;
  text-align: center;
  width: 100%;
  color: #1d1d1d;
  font-size: 40rpx;
  padding: 30rpx 0;
  border-radius: 30rpx;
}

组件js

// components/del-dialog/index.js
Component({
  properties: {
    isShow: {
      value: false,
      type: Boolean,
    }
  },
  data: {
    animationData: null,
    showModalStatus: false,
  },
  observers: {//监听是否打开或关闭弹出框
    isShow: function (value) {
      if (value) {
        this.showModal()
      } else {
        this.hideModal()
      }
    }
  },
  methods: {
    clickHandler(){//隐藏弹出框
      this.hideModal();
    },
    //底部弹出框
    showModal: function () {
      // 背景遮罩层
      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: true
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export()
        })
      }.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(),
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: false
        })
      }.bind(this), 200)
    },

  }
})

页面json 引用组件

{
  "usingComponents": {
    "del-dialog": "../../components/del-dialog/index"
  }
}

页面wxml

<!--pages/custom/index.wxml-->
<button bindtap="clickHandler" type="default" style="margin-top: 100rpx;">显示</button>

<del-dialog isShow="{{isShow}}"></del-dialog>

页面js

// pages/custom/index.js
Page({

  data: {
    isShow: false,
  },
  clickHandler() {
    this.setData({
      isShow: true,
    })
  },
})