# page-container

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

微信 Windows 版:支持

微信 Mac 版:支持

微信 鸿蒙 OS 版:支持

渲染框架支持情况:Skyline (使用最新 Nightly 工具调试). WebView 樱花视频在线.

# 功能描述

页面容器。

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

# 属性说明

属性类型默认值必填说明最低版本
showbooleanfalse是否显示容器组件2.16.0
durationnumber300动画时长,单位毫秒2.16.0
z-indexnumber100z-index 层级2.16.0
overlaybooleantrue是否显示遮罩层2.16.0
positionstringbottom弹出位置,可选值为 top bottom right center2.16.0
roundbooleanfalse是否显示圆角2.16.0
close-on-slide-downbooleanfalse是否在下滑一段距离后关闭2.16.0
overlay-stylestring自定义遮罩层样式2.16.0
custom-stylestring自定义弹出层样式2.16.0
bind:beforeentereventhandle进入前触发2.16.0
bind:entereventhandle进入中触发2.16.0
bind:afterentereventhandle进入后触发2.16.0
bind:beforeleaveeventhandle离开前触发2.16.0
bind:leaveeventhandle离开中触发2.16.0
bind:afterleaveeventhandle离开后触发2.16.0
bind:clickoverlayeventhandle点击遮罩层时触发2.16.0

# Bug & Tip

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

# 示例代码

在开发者工具中预览效果