uni-app：监听页面返回，禁用返回操作

文章目录

• • [1. 重写 uni.navigateBack 方法](#1. 重写 uni.navigateBack 方法)
  • [2. 改进方案：确保只在当前页面拦截返回操作](#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>

说明：

1. getCurrentPages(): getCurrentPages() 返回当前页面栈，pop() 会返回栈中的最后一个页面（即当前页面）。通过比较当前页面是否是触发返回操作的页面，来决定是否弹出确认框。

2. 拦截返回操作: 只有当返回操作是在当前页面时才弹出确认框，其他页面返回操作不受影响。

3. 恢复原有的 navigateBack 方法: 页面卸载时，在 onUnload() 中恢复 uni.navigateBack 的原始行为，避免影响到其他页面。