微信小程序监听返回操作，强制停留当前页面（右滑手势、安卓物理返回键）

效果如下：（上方的返回按钮是微信自带的，不是自定义的）

ps:

右滑手势、安卓物理返回键、左上角返回按键都能强制停留在当前页面

同样，如果页面上有弹窗，返回按钮点一次关闭弹窗，点第二次才是返回上个页面。（也可以做到点一次直接返回，具体写法按照业务来）。

核心组件：

page-container

https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

具体代码：

integral.wxml：

<view> 我是背景内容 <t-radio block="{{false}}" checked="{{isSelect}}" bind:change="handleRadioChange" label="单选标题" /> </view> <page-container show="{{pageContainer}}" overlay="{{false}}" bind:beforeleave="handleBeforeLeave"> </page-container> <t-toast id="t-toast" /> <t-dialog visible="{{showTextAndTitle}}" title="对话框标题" content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内" confirm-btn="{{ confirmBtn }}" bind:confirm="closeDialog" />

integral.js:

import Toast from 'tdesign-miniprogram/toast'; Page({ /** * 页面的初始数据 */ data: { pageContainer: true, isSelect: false }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, handleBeforeLeave() { if (!this.data.isSelect) { Toast({ context: this, selector: '#t-toast', message: '必须勾选才能返回', theme: 'warning', direction: 'column', }); this.setData({ pageContainer: true }) } }, handleRadioChange(e) { this.setData({ isSelect: !this.data.isSelect }, () => { // 手动触发监听逻辑 this.setData({ pageContainer: !this.data.isSelect }) }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })