当前位置：首页 > news >正文

微信小程序 / UNIAPP --- 阻止小程序返回（顶部导航栏返回、左 / 右滑手势、安卓物理返回键和调用 navigateBack 接口）

news 来源：原创 2025/6/26 9:47:35

理解page-container的原理

设置禁止点击遮盖层关闭？

阻止左滑返回

理解page-container的原理

page-container组件的所有属性，最重要的是show值。在页面上引入这个组件后，若show值为true，页面上所有各种方式触发的返回操作都会被这个组件所拦截，然后自动将值置为false。当值为false后，这个组件就没有作用了，但是我们可以重新赋值，就能让它重新恢复拦截。在官方文档中，示例代码在page-container中是有具体组件的，这可能误导我们忽略了让它去实现返回二次确认这种无任何显示的最纯粹的功能。当然，基于page-container其实还能实现各种复杂的覆盖在页面之上的组件。

设置禁止点击遮盖层关闭？

<!-- wxml -->
<page-container show="{{true}}"><view class="detail-mask" catchtouchmove="stopTouchMove"></view><view class="detail-page" catchtouchmove="stopTouchMove"><!-- 你的代码 --></view>
</page-container>

/* wxss */
.detail-mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;
}

.detail-page {position: relative;min-height: 300px;
}

// js
stopTouchMove() {}, // 阻止穿透蒙层

阻止左滑返回

网上、官网上很多人只提到了这种方法可以解决阻止返回问题，却没有很好的说明，导致很多朋友在使用时并没有达到预期效果。下面这个简单理解希望可以帮助到大家。
可以简单理解为在页面生成page-container时会通知小程序需要监听用户返回操作，并且阻止返回一次。
当用户做了返回操作后，小程序执行了阻止返回，然后移除了监听，所以接着再做一次返回操作就直接返回了。
所以要达到不点击确定返回，下一次做返回操作时依旧要阻止，就可以在每次返回点取消时候，移除page-container，再重新生成一个page-container，这时就又会重新通知小程序监听返回一次，所以上文用的是v-if。

<template><view><text>测试阻止返回的页面</text><!-- 阻止返回 --><!--注意一定要用v-if 才可以，不然即使showPage1设置为false，第二次也会直接返回--><view v-if="isShow"><page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container></view></view>
</template>
<script>export default {onLoad(){},data(){return {isShow: true   //一开始设置为显示}},methods: {beforeleave(){this.isShow = false;  //这个很重要，一定要先把弹框删除掉uni.showModal({title: "确定要退出吗",success: (e)=>{if(e.confirm) {//判断是上一个页面进入(返回)，还是直接进入这个页面(回首页)let pages = getCurrentPages();if(pages.length === 1){// 返回到首页uni.switchTab({url: "/pages/index'"});}else {// 返回上一页uni.navigateBack({delta: 1})}}else {//点取消，生成新的弹框this.isShow = true;}}})}}}
</script>