简体中文
简体中文
# page-container
组件类型：UniPageContainerElement
弹层容器组件，效果类似于 popup 弹出层，当该组件处于显示状态时，用户进行返回操作，会关闭组件而不关闭当前页面
page-container 的特点：
- 与普通前端popup类组件相比，page-container组件能响应返回操作。返回操作具体指：右滑手势、安卓物理返回键、和调用
navigateBack接口三种返回情形。小程序未提供监听返回的API，想实现返回操作关闭弹层而不是页面，只能使用page-container组件。 - 与dialogPage相比，
page-container是组件而不是页面；page-container跨端，而 dialogPage 不支持小程序；dialogPage 支持覆盖pages.json中定义的顶部导航栏和tabbar，而page-container不支持。
# 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|
| 5.02 | 4.41 | 5.02 | 5.02 | 5.02 | 5.02 |
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| show | boolean | false | 是否显示容器组件 | |||||||||||||||||||
| duration | number | 300 | 动画时长，单位毫秒 | |||||||||||||||||||
| z-index | number | 100 | z-index 层级 | |||||||||||||||||||
| overlay | boolean | true | 是否显示遮罩层 | |||||||||||||||||||
| round | boolean | false | 是否显示圆角 | |||||||||||||||||||
| position | top | left | bottom | right | center | "bottom" | 弹出位置 | |||||||||||||||||||
| ||||||||||||||||||||||
| close-on-slide-down | boolean | false | 是否在下滑一段距离后关闭 | |||||||||||||||||||
| overlay-style | string | - | 自定义遮罩层样式 | |||||||||||||||||||
| custom-style | string | - | 自定义弹出层样式 | |||||||||||||||||||
| @beforeenter | eventhandle | - | (eventhandle) 进入前触发 | |||||||||||||||||||
| @enter | eventhandle | - | (eventhandle) 进入中触发 | |||||||||||||||||||
| @afterenter | eventhandle | - | (eventhandle) 进入后触发 | |||||||||||||||||||
| @beforeleave | eventhandle | - | (eventhandle) 离开前触发 | |||||||||||||||||||
| @leave | eventhandle | - | (eventhandle) 离开中触发 | |||||||||||||||||||
| @afterleave | eventhandle | - | (eventhandle) 离开后触发 | |||||||||||||||||||
| @clickoverlay | (event: UniPointerEvent) => void | - | 点击遮罩层时触发 | |||||||||||||||||||
# Tips
- uni ui组件库中曾广泛使用的uni-popup组件，在uni-app x中推荐改用 page-container 组件替代
- 组件支持拦截用户的返回操作，包括右滑手势、安卓物理返回键和调用 navigateBack API
- Web 设置
overlay: true时，组件会禁止背景页面滚动，避免滚动穿透 - 小程序
uni.navigateBack无法在页面栈顶调用，此时没有上一级页面 - 小程序不支持
左侧弹出，App 和 Web 支持 - 微信小程序
enter和leave相关事件的回调函数有参数event，App 和 Web 平台没有 - 开启
closeOnSlideDown后，微信小程序需要快速下滑才生效，App 和 Web 会跟着手指拖动滑动 - 小程序页面最多只有1个page-container，若已存在page-container的情况下，无法新弹出page-container。App 和 Web 支持弹出多个page-container组件，后弹覆盖先弹。
