跳到主要内容
版本:4.x

PageContainer

页面容器

小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此提供“假页”容器组件,效果类似于 popup 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口。

Bug & Tip

  1. tip: 当前页面最多只有 1 个容器,若已存在容器的情况下,无法增加新的容器
  2. tip: wx.navigateBack 无法在页面栈顶调用,此时没有上一级页面

支持情况:

参考文档

类型

ComponentType<PageContainerProps>

PageContainerProps

参数类型默认值必填说明
showbooleanfalse是否显示容器组件
durationnumber300动画时长,单位毫秒
zIndexnumber100z-index 层级
overlaybooleantrue是否显示遮罩层
positionkeyof Positionbottom弹出位置,可选值为 top bottom right center
roundbooleanfalse是否显示圆角
overlayStylestring自定义遮罩层样式
customStylestring自定义弹出层样式
closeOnSlideDownbooleanfalse是否在下滑一段距离后关闭
onBeforeEnterCommonEventFunction进入前触发
onEnterCommonEventFunction进入中触发
onAfterEnterCommonEventFunction进入后触发
onBeforeLeaveCommonEventFunction离开前触发
onLeaveCommonEventFunction离开中触发
onAfterLeaveCommonEventFunction离开后触发
onClickOverlayCommonEventFunction点击遮罩层时触发
onEnterCancelledCommonEventFunction进入被打断时触发(通过 a: if 打断时不会触发)。
onLeaveCancelledCommonEventFunction离开被打断时触发(通过 a: if 打断时不会触发)。

API 支持度

API微信小程序支付宝小程序H5React NativeHarmony
PageContainerProps.show✔️✔️✔️
PageContainerProps.duration✔️✔️✔️
PageContainerProps.zIndex✔️✔️
PageContainerProps.overlay✔️✔️✔️
PageContainerProps.position✔️✔️✔️
PageContainerProps.round✔️✔️✔️
PageContainerProps.overlayStyle✔️✔️✔️
PageContainerProps.customStyle✔️✔️✔️
PageContainerProps.closeOnSlideDown✔️✔️
PageContainerProps.onBeforeEnter✔️✔️✔️
PageContainerProps.onEnter✔️✔️✔️
PageContainerProps.onAfterEnter✔️✔️✔️
PageContainerProps.onBeforeLeave✔️✔️✔️
PageContainerProps.onLeave✔️✔️✔️
PageContainerProps.onAfterLeave✔️✔️✔️
PageContainerProps.onClickOverlay✔️✔️
PageContainerProps.onEnterCancelled✔️
PageContainerProps.onLeaveCancelled✔️

Position

弹出位置

参数说明
top上方弹出
bottom下方弹出
right右边弹出
center中央弹出