page-container

基础库 2.16.0 开始支持,低版本需做兼容处理

页面容器。

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

属性 类型 默认值 必填 说明 最低版本
show boolean false 是否显示容器组件 2.16.0
duration number 300 动画时长,单位毫秒 2.16.0
z-index number 100 z-index 层级 2.16.0
overlay boolean true 是否显示遮罩层 2.16.0
position string bottom 弹出位置,可选值为 top bottom right center 2.16.0
round boolean false 是否显示圆角 2.16.0
close-on-slideDown boolean false 是否在下滑一段距离后关闭 2.16.0
overlay-style string 自定义遮罩层样式 2.16.0
custom-style string 自定义弹出层样式 2.16.0
bind:beforeenter eventhandle 进入前触发 2.16.0
bind:enter eventhandle 进入中触发 2.16.0
bind:afterenter eventhandle 进入后触发 2.16.0
bind:beforeleave eventhandle 离开前触发 2.16.0
bind:leave eventhandle 离开中触发 2.16.0
bind:afterleave eventhandle 离开后触发 2.16.0
bind:afterleave eventhandle 离开后触发 2.16.0
bind:clickoverlay eventhandle 点击遮罩层时触发 2.16.0

Bug & Tip

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

示例代码

在开发者工具中预览效果