微信小程序实现滑动返回拦截：page-container组件详解

微信小程序实现滑动返回拦截：page-container组件详解

page-container官网

一、page-container组件介绍

page-container是微信小程序内置的一个页面容器组件，可用于创建类似于原生微信的滑动返回交互效果。它不仅支持滑动返回手势，还提供了拦截返回的能力，让我们可以在用户滑动返回时进行二次确认。

二、基本用法

1. 组件属性

<page-container 
  :show="showPC"           // 是否显示容器
  :overlay="false"         // 是否显示遮罩层
  @beforeleave="onBeforeLeave"  // 返回前的回调函数
></page-container>

主要属性说明：

• show：控制容器的显示和隐藏
• overlay：是否显示遮罩层
• position：弹出位置（‘right’, ‘top’, ‘bottom’, ‘center’）
• round：是否显示圆角

2. 事件处理

• beforeleave：在用户滑动返回时触发
• afterleave：页面退出动画完成后触发
• enter：页面进入动画开始时触发
• afterenter：页面进入动画完成后触发

三、滑