uni-app:监听页面返回,禁用返回操作

文章目录

    • [1. 重写 uni.navigateBack 方法](#1. 重写 uni.navigateBack 方法)
    • [2. 改进方案:确保只在当前页面拦截返回操作](#2. 改进方案:确保只在当前页面拦截返回操作)

在 UniApp 开发中,有时我们需要在满足特定条件时,禁止用户执行返回上一页面的操作。常见的需求是,当用户在某个页面进行某些操作时(例如未保存的数据),我们需要确认用户是否真的希望离开当前页面。

本文介绍了如何通过重写 uni.navigateBack 方法,拦截返回操作,并在满足特定条件时弹出确认框,确保用户的操作是有意的。此外,还提供了改进方案,确保在页面跳转时不会影响其他页面的返回操作,只有在当前页面才会触发返回拦截。

1. 重写 uni.navigateBack 方法

在 UniApp 中,uni.navigateBack() 是用来返回上一页面的 API。为了在用户执行返回操作时加入自定义逻辑(如弹出确认框),我们可以重写 uni.navigateBack() 方法。

初步实现:

javascript 复制代码
<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 的原始方法。

改进后的代码:

javascript 复制代码
<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 的原始行为,避免影响到其他页面。

相关推荐
前端开发与ui设计的老司机11 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人13 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景35 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互