文章目录
- 1. 重写 uni.navigateBack 方法
- 2. 改进方案：确保只在当前页面拦截返回操作
在 UniApp 开发中，有时我们需要在满足特定条件时，禁止用户执行返回上一页面的操作。常见的需求是，当用户在某个页面进行某些操作时（例如未保存的数据），我们需要确认用户是否真的希望离开当前页面。
本文介绍了如何通过重写 uni.navigateBack 方法，拦截返回操作，并在满足特定条件时弹出确认框，确保用户的操作是有意的。此外，还提供了改进方案，确保在页面跳转时不会影响其他页面的返回操作，只有在当前页面才会触发返回拦截。
1. 重写 uni.navigateBack 方法
在 UniApp 中，uni.navigateBack() 是用来返回上一页面的 API。为了在用户执行返回操作时加入自定义逻辑（如弹出确认框），我们可以重写 uni.navigateBack() 方法。
初步实现：
<template>
</template><script>export default {data() {return {originalBack: null,}},onLoad() {// 保存原始的 navigateBack 方法this.originalBack = uni.navigateBack;let that = this;// 重新定义 navigateBack 方法uni.navigateBack = function() {// 可以根据条件判断是否要阻止返回uni.showModal({title: '提示',content: '确定要离开此页面吗？',success(res) {if (res.confirm) {if (true) {// 满足某一条件时执行返回操作// 用户确认离开，执行原始的返回操作that.originalBack.call(this);} else {//不满足条件时的动作}} else {// 用户取消离开，什么都不做，阻止返回}}});};},onUnload() {// 页面卸载时，恢复原来的返回功能uni.navigateBack = this.originalBack;}}
</script><style>
</style>
在上述代码中，我们通过重写 uni.navigateBack 方法，实现了对用户返回操作的拦截。当用户尝试返回上一页时，首先弹出一个确认框，只有在用户确认后才会执行返回操作。如果用户取消，则返回操作会被阻止。
效果展示：
2. 改进方案：确保只在当前页面拦截返回操作
上述方法能够实现基本的返回拦截功能，但在打开新页面时，当前页面并未销毁，因此当用户从新页面返回时，拦截仍然会触发，这不是我们想要的效果。
为了解决这一问题，我们需要确保 只有在当前页面 执行返回操作时才会触发拦截。为了实现这一目标，我们可以使用 uni.getCurrentPages() 来判断是否是当前页面，并在页面卸载时恢复 uni.navigateBack 的原始方法。
改进后的代码：
<template>
</template><script>export default {data() {return {// 用于存储原始的 navigateBack 方法originalBack: null,}},onLoad() {// 监听返回操作this.listenNavigateBack();},onUnload() {// 页面卸载时，恢复原来的返回功能uni.navigateBack = this.originalBack;},methods: {// 监听返回操作listenNavigateBack() {// 获取当前页面的路径const currentPage = getCurrentPages().pop(); // 获取当前页面的实例// 保存原始的 navigateBack 方法this.originalBack = uni.navigateBack;let that = this;// 重新定义 navigateBack 方法uni.navigateBack = function() {// 仅在当前页面时触发返回拦截if (getCurrentPages().pop() === currentPage) {// 可以根据条件判断是否要阻止返回uni.showModal({title: '提示',content: '确定要离开此页面吗？',success(res) {if (res.confirm) {if (true) { // 满足某一条件时执行返回操作// 用户确认离开，执行原始的返回操作that.originalBack.call(this);} else {//不满足条件时的动作}} else {// 用户取消离开，什么都不做，阻止返回}}});} else {// 在其他页面时，不做拦截，直接返回that.originalBack.call(this);}};},}}
</script><style>
</style>
说明：
-
getCurrentPages(): getCurrentPages()返回当前页面栈，pop()会返回栈中的最后一个页面（即当前页面）。通过比较当前页面是否是触发返回操作的页面，来决定是否弹出确认框。 -
拦截返回操作: 只有当返回操作是在当前页面时才弹出确认框，其他页面返回操作不受影响。
-
恢复原有的
navigateBack方法: 页面卸载时，在onUnload()中恢复uni.navigateBack的原始行为，避免影响到其他页面。