首先创建一个组件component，组件命名可以为modal

modal.wxml的内容为

<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'>
  <view class='modal-content'>
    <scroll-view scroll-y class='main-content'>
      <slot></slot>
    </scroll-view>
    <view class='modal-footer'>
      <view wx:if='{{!single}}' class='cancel-btn' bindtap='cancel'>取消</view>
      <view class='confirm-btn' bindtap='confirm'>确定 </view>
    </view>
  </view>
</view>

modal.js的内容为

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal弹窗
    show: {
      type: Boolean,
      value: false
    },
    //控制底部是一个按钮还是两个按钮，默认两个
    single: {
      type: Boolean,
      value: false 
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击modal的回调函数
    clickMask() {
      // 点击modal背景关闭遮罩层，如果不需要注释掉即可
      this.setData({show: false})
    },
   // 点击取消按钮的回调函数
    cancel() {
      this.setData({ show: false })
      this.triggerEvent('cancel')  //triggerEvent触发事件
    },
    // 点击确定按钮的回调函数
    confirm() {
      this.setData({ show: false })
      this.triggerEvent('confirm')
    }
  }
})

modal.wxss的内容为

/* components/modal/modal.wxss */
/*遮罩层*/
.modal-mask{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}
/*遮罩内容*/
.modal-content{
  display: flex;
  flex-direction: column;
  width: 80%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  text-align: center;
}
/*中间内容*/
.main-content{
  flex: 1;
  height: 100%;
  overflow-y: hidden; 
  max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/
}
/*底部按钮*/
.modal-footer{
  display: flex;
  flex-direction: row;
  height: 80rpx;
  line-height: 80rpx;
  border-top: 2rpx solid #D2D3D5;
  margin-top: 30rpx;
}
.cancel-btn, .confirm-btn{
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
}
.cancel-btn{
  color: #000;
  border-right: 2rpx solid #D2D3D5;
}
.confirm-btn {
  color: #3f88ea;
}
.title{
  text-align: center;

}

在页面上的应用为

"modalView": "/components/modal/modal"

  <!-- modal弹窗-->
  <modalView show="{{!isShow}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{false}}'>
    <view class='modal-content'>
      <scroll-view scroll-y class='main-content'>
        <view class="content">

        </view>
      </scroll-view>
    </view>
  </modalView>

在data中 添加

isShow:false

显示时设置

    this.setData({
      isShow:true
    })