本文详解微信小程序中阻止用户通过左上角返回、物理返回键及手势滑动返回页面的多种实现方案。涵盖自定义导航栏配置、使用wx.enableAlertBeforeUnload进行返回前提示，以及利用page-container组件实现复杂交互逻辑，如弹窗拦截与指定按钮退出，确保关键业务场景下的页面控制权。
前言
这一场景在实际开发中颇具趣味。以某多多为例，当用户点击左上角返回时，系统会立即弹出一堆未使用的优惠券，营造出一种“现在消费最划算”的心理暗示，从而诱导用户留在当前页面。
若业务场景较为简单，仅需监听左上角的返回操作，可以通过关闭微信自带的导航栏，转而使用手写导航栏或UI库提供的导航组件来实现。随后，在自定义导航栏的返回按钮上绑定点击事件，即可执行所需的业务逻辑。
一、自定义导航栏
实现自定义导航栏需在页面配置中进行如下设置：
{
"path": "pages/login/login",
"style": {
+ "navigationStyle": "custom"
}
}二、wx.enableAlertBeforeUnload
如果点击返回时仅需向用户发出提示（类似showModal的效果），可使用wx.enableAlertBeforeUnload方法。一旦用户点击左上角返回，该方法触发的回调即被执行：若用户选择确定退出，则离开当前页；若选择取消，则停留在当前页面。
onLoad(e) {
uni.enableAlertBeforeUnload({
message: "返回上页时弹出对话框",
success: function (res) {
console.log("点击确认按钮了：", res);
},
fail: function (errMsg) {
console.log("点击取消按钮了：", errMsg);
},
})
},三、page-container
若场景更为复杂，需处理手机系统自带的滑动返回功能（如iOS的右滑返回、Android的右滑及Back键返回），则需借助page-container组件。该组件以弹窗形式呈现，可有效拦截系统默认返回行为。
<page-container :show="true" :duration="false" :overlay="false">
存放内容
</page-container>当用户点击返回按钮时，首先执行隐藏当前page-container的操作；只有当page-container完全隐藏后，再次点击返回才会真正触发上一页的跳转。
在常规逻辑中，若希望优惠券仅弹出一次，可将page-container置于内容层之外以实现隔离。当用户点击关闭时，先隐藏page-container，此时不会触发当前页的返回事件。利用page-container的beforeleave（离开前）事件，可在其中添加显示优惠券的业务逻辑。
<template>
<view >
<scroll-view scroll-y="true" style="height: 100vh;" :scroll-top="top" class="mainBox" @scroll="scroll">
<view class="" v-for="item in 99">
我是内容
</view>
</scroll-view>
<page-container :show="true" :duration="false" :overlay="false" @beforeleave="beforeleave"></page-container>
</view>
</template>
methods:{
beforeleave(){
uni.showModal({
title:'弹出优惠券逻辑'
})
},
}
若项目需求极为特殊，要求“只要点击左上角返回就不允许退出，必须点击指定的返回按钮才能离开”，实现思路是在当前页面内部再次进入一个page-container。其优势在于能明确感知用户的返回意图，缺点则是会触发一次页面加载效果。
完整代码
<template>
<page-container :show="isShow" :duration="false" :overlay="false" @beforeleave="beforeleave" @afterleave="afterleave" >
<scroll-view scroll-y="true" style="height: 100vh;" :scroll-top="top" class="mainBox" @scroll="scroll">
<view class="back" @click="back">
指定返回按钮
</view>
<view class="" v-for="item in 99">
我是内容
</view>
</view>
</scroll-view>
</page-container>
</template>
<script>
export default {
data() {
return {
isShow:true,
top:0,
scrollTop:0,
}
},
onLoad(e) {
this.top = e.top
},
methods: {
back(){
this.isShow = false
console.log('点击返回了');
uni.navigateBack()
},
beforeleave(){
if(!this.isShow) return uni.navigateBack()
console.log('点击返回了');
uni.redirectTo({
url:`/pages/mine/test?top=${this.scrollTop}`,
fail(err) {
console.log(err);
}
})
},
// 需要在退出一次 否则退不出去
afterleave(){
if(!this.isShow) return uni.navigateBack()
},
// 记录当前位置 下次进来时自动转到刚才的位置
scroll(e){
this.scrollTop = e.target.scrollTop
}
},
}
</script>
总结
到此这篇关于微信小程序阻止页面返回(包滑动、自动返回键)的文章就介绍到这了,更多相关微信小程序阻止页面返回内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！