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

embedded/2024/12/28 6:51:27/

文章目录

    • 1. 重写 uni.navigateBack 方法
    • 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 的原始行为,避免影响到其他页面。


http://www.ppmy.cn/embedded/149099.html

相关文章

C语言勘破之路-最终篇 —— 预处理(上)

人无完人&#xff0c;持之以恒&#xff0c;方能见真我&#xff01;&#xff01;&#xff01; 共同进步&#xff01;&#xff01; 文章目录 一、预定义符号二、#define定义常量三.、#define定义宏四、带有副作用的宏参数五、宏替换的规则六、宏和函数的对比1.宏的优势2.函数的优…

AI视觉算法之朴素贝叶斯算法的合理利用

前言 在人工智能领域&#xff0c;视觉算法是一类重要的技术&#xff0c;用于处理和分析图像数据。朴素贝叶斯算法是一种基于概率的分类方法&#xff0c;它假设特征之间相互独立&#xff0c;因此非常适合处理高维数据集。本文将介绍朴素贝叶斯算法在AI视觉中的应用&#xff0c;…

【LeetCode 面试经典150题】详细题解之矩阵篇

【LeetCode 面试经典150题】详细题解之矩阵篇 1 矩阵的基础1.1 表示矩阵1.2 创建矩阵相关题目 2 36.有效的数独 &#xff08;需要复习&#xff09;分析代码 3 54.螺旋矩阵&#xff08;需要复习&#xff09;分析代码 4 48.旋转图像思路代码 5 73.矩阵置零 &#xff08;一遍过&am…

计算机视觉目标检测-1

文章目录 摘要Abstract1.目标检测任务描述1.1 目标检测分类算法1.2 目标定位的简单实现思路1.2.1 回归位置 2.R-CNN2.1 目标检测-Overfeat模型2.1.1 滑动窗口 2.2 目标检测-RCNN模型2.2.1 非极大抑制&#xff08;NMS&#xff09; 2.3 目标检测评价指标 3.SPPNet3.1 spatial pyr…

35. TCP网络编程

一、TCP协议简介 1.1、什么是TCP协议 TCP 协议则是建立在 IP 协议之上的。TCP 协议负责在两台计算机之间建立可靠连接&#xff0c;保证数据包按顺序达到。TCP 协议会通过 3 次握手建立可靠连接。然后需要对每个 IP 包进行编号&#xff0c;确保对方按顺序收到&#xff0c;如果包…

【西安电子科技大学考研】25官方复试专业课参考书目汇总

初试已经顺利考完啦、成绩已经公布&#xff0c;现在已经有很多同学来问学长学姐&#xff0c;复试参考书有哪些&#xff0c;复试应该做好哪些准备。故此学长学姐给大家整理好了西安电子科技大学各个学院的复试参考书目录&#xff0c;有需要的同学可以参考一下哈。大家可以结合本…

node.js web框架koa的使用

koa框架使用的步骤&#xff1a; 输入网址后出现两层打印&#xff0c;第一个打印是针对我们输入网址按下回车发送的请求&#xff0c;第二个打印是针于浏览器自己会发起的关于网站图标获取的请求 第二成中间件调用next()之后的结果&#xff08;这个next相当于写的下一个中间件&am…

HTTP—02

方法&#xff08;method&#xff09; 方法说明支持的HTTP协议版本GET获取资源1.0 1.1POST传输实体主体1.0 1.1PUT传输文件1.0 1.1HEAD获得报文首部1.0 1.1DELETE删除文件1.0 1.1OPTION询问支持的方法1.0TRACE追踪路径1.0CONNECT要求用隧道协议连接代理1.0LINK建立和资源之…