微信小程序 - 内容弹出框实现（Vant Weapp 实现、原生实现）

内容弹出框概述

• 这里的内容弹出框特指：有内容区域、无标题、无确认取消按钮、有背景遮罩、点击背景遮罩可关闭的模态弹窗

---

一、Vant Weapp 实现

1、使用 Popup 组件

<van-popup show="{{ show }}" bind:close="onClose" round>
    <view class="detail-container">
        some content
    </view>
</van-popup>

.detail-container {
    box-sizing: border-box;
    width: 90vw;
    padding: 40rpx;
}

Page({
  data: {
    show: false,
  },

  showDetail(event) {
    this.setData({
      show: true,
    });
  },

  onClose(event) {
    this.setData({
      show: false,
    });
  },
});

2、使用 Dialog 组件

<van-dialog 
    use-slot
    show="{{ show }}"
    show-confirm-button="{{ false }}" 
    show-cancel-button="{{ false }}"
    close-on-click-overlay>

    <view class="detail-container">
        some content
    </view>

</van-dialog>

Page({
  data: {
    show: false,
  },

  showDetail(event) {
    this.setData({
      show: true,
    });
  },
});

3、使用 Overlay 组件

<van-overlay show="{{ show }}" bind:click="onClose">
    <view class="detail-container">
        some content
    </view>
</van-overlay>

.detail-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 90vw;
    padding: 40rpx;
    border-radius: 20rpx;
    background-color: white;
}

Page({
  data: {
    show: false,
  },

  showDetail(event) {
    this.setData({
      show: true,
    });
  },

  onClose(event) {
    this.setData({
      show: false,
    });
  },
});

---

二、原生实现

<view class="page-container">
    <button bindtap="openDialog">打开弹出框</button>
</view>
<!-- 弹出框 -->
<view class="{{ dialogStyle }}">
    <view>some content</view>
    <view>some content</view>
    <view>some content</view>
    <view>some content</view>
    <view>some content</view>
</view>
<!-- 背景遮罩 -->
<view class="{{ maskStyle }}" bindtap="closeDialog"></view>

Page {
  width: 100%;
  height: 100%;

  .page-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
  }
}

.my-dialog {
  box-sizing: border-box;
  width: 80%;
  padding: 40rpx;
  border-radius: 10rpx;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

.my-dialog-show {
  top: 50%;
}

.my-dialog-hide {
  top: 1000vh;
}

.bg-mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.bg-mask-show {
  top: 0;
}

.bg-mask-hide {
  top: 1000vh;
}

Page({
  data: {
    dialogStyle: "my-dialog my-dialog-hide",
    maskStyle: "bg-mask bg-mask-hide",
  },

  openDialog() {
    this.setData({
      dialogStyle: "my-dialog my-dialog-show",
      maskStyle: "bg-mask bg-mask-show",
    });
  },

  closeDialog() {
    this.setData({
      dialogStyle: "my-dialog my-dialog-hide",
      maskStyle: "bg-mask bg-mask-hide",
    });
  },
});