Popup 弹出层

介绍

弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-popup": "@vant/weapp/popup/index"
  3. }

代码演示

基础用法

通过show属性控制弹出层是否展示。

  1. <van-cell title="展示弹出层" is-link bind:click="showPopup" />
  2. <van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
  1. Page({
  2. data: {
  3. show: false,
  4. },
  5. showPopup() {
  6. this.setData({ show: true });
  7. },
  8. onClose() {
  9. this.setData({ show: false });
  10. },
  11. });

弹出位置

通过position属性设置弹出位置,默认居中弹出,可以设置为topbottomleftright

  1. <van-popup
  2. show="{{ show }}"
  3. position="top"
  4. custom-style="height: 20%;"
  5. bind:close="onClose"
  6. />

关闭图标

设置closeable属性后,会在弹出层的右上角显示关闭图标,并且可以通过close-icon属性自定义图标,使用close-icon-position属性可以自定义图标位置。

  1. <van-popup
  2. show="{{ show }}"
  3. closeable
  4. position="bottom"
  5. custom-style="height: 20%"
  6. bind:close="onClose"
  7. />
  8. <!-- 自定义图标 -->
  9. <van-popup
  10. show="{{ show }}"
  11. closeable
  12. close-icon="close"
  13. position="bottom"
  14. custom-style="height: 20%"
  15. bind:close="onClose"
  16. />
  17. <!-- 图标位置 -->
  18. <van-popup
  19. show="{{ show }}"
  20. closeable
  21. close-icon-position="top-left"
  22. position="bottom"
  23. custom-style="height: 20%"
  24. bind:close="onClose"
  25. />

圆角弹窗

设置round属性后,弹窗会根据弹出位置添加不同的圆角样式。

  1. <van-popup
  2. show="{{ show }}"
  3. round
  4. position="bottom"
  5. custom-style="height: 20%"
  6. bind:close="onClose"
  7. />

禁止滚动穿透

使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。

目前,组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。 不过,我们为开发者提供了一个推荐方案以完整解决滚动穿透:

page-meta

当小程序基础库最低版本在 2.9.0 以上时,即可使用 page-meta 组件动态修改页面样式

  1. <!-- page-meta 只能是页面内的第一个节点 -->
  2. <page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />
  3. <van-popup show="{{ show }}" catch:touchstart />

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置,可选值为 top bottom right leftstringcenter
duration动画时长,单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string‘’
overlay-style自定义遮罩层样式string‘’
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离(状态栏高度)booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类

Popup 弹出层 - 图1