在鸿蒙平台上用 uni-app x 做弹出层时，page-container 是比 uni-popup 更值得优先评估的页面容器组件。它从鸿蒙 5.02 开始支持，核心能力是拦截返回操作：右滑手势、物理返回键、navigateBack 调用，都会先关闭弹出层，而不是直接返回上一页。对底部分享面板、右侧设置页、居中确认弹窗、顶部通知栏这类场景，这个行为能减少弹层未关就退出页面的交互问题。
选型上，原文给出的判断很直接：简单确认框用 showModal；弹出面板、侧边栏用 page-container；全屏弹窗、需要覆盖导航栏用 dialogPage。也就是说，page-container 更适合页面内局部或半屏弹出层，而不是所有弹窗都替代。
page-container 的常用能力可以从原文示例归纳为几类。显示控制用 show；弹出位置用 position，支持 bottom、top、right、left、center；圆角和遮罩相关用 round、overlay、overlay-style；交互关闭用 clickoverlay、close-on-slide-down；生命周期事件包括 beforeenter、enter、afterenter、beforeleave、leave、afterleave。实际适配鸿蒙时，建议把 show 状态和 @afterleave 绑定起来，动画结束后同步关闭，避免状态残留。
底部弹出面板是最常见场景。典型用法是 position=bottom、round=true，配合 @clickoverlay 和 @afterleave 关闭。面板内容可以用 v-for 做分享渠道列表，底部放取消按钮。这个模式适合分享面板、操作菜单、评论输入框等。
右侧弹出设置或筛选面板时，使用 position=right。原文示例用一个 300px 宽容器承载筛选条件，用 selectSort 记录单选状态，点击确定后调用 applyFilter，关闭面板并 uni.showToast 提示筛选已应用。这个流程适合设置页、筛选抽屉、详情侧栏。居中确认弹窗使用 position=center，并通过 overlay-style 自定义遮罩，例如 background-color: rgba(0, 0, 0, 0.5);。确认删除后关闭并提示已删除。
顶部下拉通知使用 position=top，并可设置 overlay=false，让通知栏从顶部出现但不依赖遮罩关闭。原文示例用 padding-top: 50px 避开状态栏区域，内容包含系统维护通知：今晚 22:00-23:00 进行升级，并提供关闭文本。这个用法适合全局通知、维护提示、弱阻断消息。
下滑关闭是底部面板的高频交互。设置 position=bottom、round=true、close-on-slide-down=true，即可支持向下滑动关闭。原文描述：向下滑动一段距离后弹出层会自动关闭，App 端面板会跟着手指拖动滑动，类似微信分享面板、抖音评论面板。实现时注意面板内容区域要留出足够高度，原文示例使用 min-height: 300px。
自定义遮罩时，overlay-style 可以动态切换。原文示例包含默认遮罩、透明遮罩、绿色半透明遮罩和点击遮罩不关闭四类。透明遮罩用 background-color: rgba(0, 0, 0, 0);；绿色半透明用 rgba(76, 175, 80, 0.3)；不关闭场景用 pointer-events: none，并通过 canCloseByOverlay 变量控制 @clickoverlay 逻辑。这个思路适合需要引导用户必须点击按钮的强提示。
动画事件用于调试和状态同步。原文示例监听 beforeenter、enter、afterenter、beforeleave、leave、afterleave，并在控制台输出进入前、进入中、进入后、离开前、离开中、离开后。其中 @afterleave 中再次把 show 状态置为 false，是常见的收尾写法。排查弹层状态异常时，可以先看这组事件是否按顺序触发。
完整实战页面可以组织成：外层 scroll-view，页面内放弹出位置、功能演示、事件日志三组按钮；底部放一个通用 page-container，通过 popupPosition、popupRound、popupOverlay、popupSlideDown 等变量动态控制；再分别放分享面板、筛选面板等专用 page-container。这样既能复用通用弹层，也能针对分享、筛选做独立交互。调试时重点验证三点：返回操作是否先关闭弹层；@afterleave 是否把 show 置为 false；遮罩点击和 close-on-slide-down 是否符合预期。
总体上，鸿蒙加 uni-app x 的弹出层开发中，page-container 的价值不只是弹出一个层，而是把返回拦截、遮罩、位置、动画生命周期和手势关闭整合到一个页面容器里。对于需要替代 uni-popup 的鸿蒙项目，建议优先按上述场景做适配和回归验证。 |
发表于