uniapp中,监听页面物理返回问题

业务场景:监听到手机物理返回后,返回到我想要返回的页面(返回按钮自动是返回上一页的)

uniapp官方提供了onBackPress的用法, 这个钩子目前官方只支持app、H5、支付宝小程序,针对我使用的场景(微信小程序)中是不支持这个钩子的,在研究浏览了大量文档后,终于解决了,记录一下我的踩坑和解决方案。

解决方案:利用微信官方提供的视图容器组件 page-container | 微信开放文档

页面容器 page-container官网介绍:

小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此提供“假页”容器组件,效果类似于 popup 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口

见用法:点击返回会触发 beforeleave 事件

<view v-if="isShow"><page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
</view>data(){return{isShow: true}}beforeleave() {this.isShow = false; //这个很重要,一定要先把弹框删除掉uni.switchTab({url: "/pages/user/index"});//uni.showModal({// 	confirmColor: '#bd3124',// 	title: "确认离开我的账户页面?",// 	success: (e) => {// 		if (e.confirm) {// 			console.log('确认盘点接口');// 			// 返回上一页// 			uni.switchTab({// 				url: "/pages/user/index"// 			});// 		}else{// 			return false;// 		}// 	}//})
},

踩坑一:

监听页面返回换个思路就是页面离开了,所以第一次是站在页面离开的思路解决问题,开始使用了页面离开或者销毁的钩子 实现业务:onUnload

页面返回就是离开,会触发onUnload钩子,在函数中监测到页面的变化,返回自己想要的页面或者做其他操作

onUnload() {uni.switchTab({url: "/pages/user/index"});
},

效果实现了,但是出现了预料中的问题(中间页面闪现),因为返回按钮默认是navigateback返回上一页,因此页面离开前会触发先返回上一页在返回自己想要的页面,就造成了中间页面跳转闪动,在找不到更好的解决方案时此方案作为备选。

踩坑二:

看有人说在a页面跳转b页面时,a页面在跳转成功后调用uni.navigateBack({delta:0}),b在返回时就可以阻止b页面到a页面的返回,只想说,这个死循环逻辑饶的玩笑了。

uni.navigateTo({url: "/pagesA/account/index?sign=corpore",success(){uni.navigateBack({delta:0})}
})// 监听页面路由变化的方法会执行很多次,轻易不要用,不好用这里简单做个记录
// uni.onAppRoute(res => {
// 	console.log(res,'rsd')
//     if (res.openType === 'navigateBack') {
// 		console.log('我进来了')
//       //执行相应的操作,例如关闭弹窗或禁止返回
//     }
//  });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/608050.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Android Compose实现网格列表滑到底部的提示信息展示

文章目录 概述1 效果对比1.1 使用添加Item的办法&#xff1a;1.2 使用自定义的方法 2. 效果实现2.1 列表为空时的提示页面实现2.2 添加Item的方式代码实现2.3 使用自定义的方式实现 3. UI工具类 概述 目前大多数的APP都会使用列表的方式来呈现内容&#xff0c;例如淘宝&#x…

C#,入门教程(12)——数组及数组使用的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(11)——枚举&#xff08;Enum&#xff09;的基础知识和高级应用https://blog.csdn.net/beijinghorn/article/details/123917587 数组是一种数据集合&#xff0c;是一组完全相同的、按顺序存放的数据。 需要记住数组的几个特征&…

如何查询关键词的KD与搜索量

随着海外贸易的不断发展&#xff0c;越来越多的小伙伴们从事外贸行业&#xff0c;但是随着面对有限的市场和激烈的竞争&#xff0c;很多从业者往往流量的来源比较单一&#xff0c;那就是付费流量&#xff0c;包括谷歌ads&#xff0c;facebook等一些投流广告。广告的好处是当你付…

OpenMMLab教程:OpenMMLab介绍与安装

一、 OpenMMLab介绍 OpenMMLab 是一个用于学术研究和工业应用的开源算法体系&#xff0c;于2018年年中开始&#xff0c;由 MMLab&#xff08;香港中文大学多媒体实验室&#xff09;和商汤科技联合启动。OpenMMLab 致力于为计算机视觉领域的重要方向创建统一且开源的代码库&…

开始卷TED:第1篇 —— 《Embrace the near win》—— part: 2

But this is the thing: What gets us to convert success into mastery? 问题来了&#xff1a;我们如何将一次成功转化为卓越的成就呢&#xff1f; mastery convert This is a question I’ve long asked myself. I think it comes when we start to value the gift of a n…

前端常用js、css效果

前端常用js效果 效果参考代码文本横向滚动文本无限滚动无缝轮播无缝滚动盒子上下移动樱花飘落 效果 主要整理了几个常用的&#xff0c;方便平时做项目的时候参考 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下滚动 樱花飘落效果 参考代码 文本横向滚动 <!DOCTYP…

图连通性,Tarjan算法

前言 通常说的Tarjan算法指的是计算机科学家Robert Tarjan提出的多个与图连通性有关的算法&#xff0c;通常包括&#xff1a; 强连通性 有向图的强连通分量&#xff08;SCC&#xff09;缩点 无向图的边双连通性 割边无向图的边双连通&#xff08;e-DCC&#xff09;分量缩点 无…

美餐支付 - PHP代碼实现

前言 背景 前段时间&#xff0c;因接手的项目需要实现 美餐支付 的功能对接 在此记录一下鄙人的实现步骤&#xff0c;方便有需要的道友参考借鉴 场景描述 我们的 “现代膳食” 售卖机&#xff0c;可以在屏幕上显示可配送的餐食 用户选中商品后&#xff0c;点击购买 选择 “美餐…

MyBatis-Plus Generator代码生成器

1.加入mybatis-plus相关依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version> </dependency><dependency><groupId>com.baomidou<…

Git 忽略提交 .gitignore

Git 忽略提交 .gitignore 在使用Git的过程中&#xff0c;我们喜欢有的文件比如日志&#xff0c;临时文件&#xff0c;编译的中间文件等不要提交到代码仓库&#xff0c;这时就要设置相应的忽略规则&#xff0c;来忽略这些文件的提交。 Git 忽略文件提交的方法 有三种方法可以实…

铸铁检验平台主要应用在哪些行业中——河北北重

铸铁检验平台可应用于以下行业&#xff1a; 汽车制造业&#xff1a;用于检验汽车零部件的铸铁材质和质量&#xff0c;以确保零部件的可靠性和耐用性。 机械制造业&#xff1a;用于检验铸铁机械零部件的质量和性能&#xff0c;以确保机械设备的稳定运行。 建筑工程&#xff1a…

《罗素论教育》笔记

目录 全书架构 书简介 经典摘录 一、教育的理想 教育的基本原理 教育的目的 二、品性的教育 一岁前的教育 主要是2岁到6岁的教育 三、智力教育 14岁前的课程安排 最后的学年 大学教育 四、结束语 全书架构 书简介 经典摘录 一、教育的理想 教育的基本原理 1、我…

ROS学习笔记(二):话题通信、服务通信的了解和对应节点的搭建(C++)

ROS学习笔记&#xff08;二&#xff09;&#xff1a;话题通信、服务通信的了解和对应节点的搭建&#xff08;C和Python&#xff09; 前言一、Topics话题通信&#xff08;C&#xff09;0、自定义msg消息类型文件1、发布者&#xff08;Publisher&#xff09;2、订阅者&#xff08…

thinkphp递归实现无限级子分类合并上级children

//设别分类列表public function getCategoryList(){$list = Db::name(categorys)->select(

【Python机器学习】决策树的优缺点

控制决策树模型复杂度的参数是预剪枝参数&#xff0c;它在树完全展开之前停止树的构造。 决策树的优点&#xff1a; 1、得到的模型很容易可视化 2、算法完全不受数据缩放的影响 决策树算法不需要特征预处理&#xff0c;比如归一化或标准化。特别是特征的尺度完全不一样时或…

MODBUS转PROFINET网关与全数字交流伺服配置案例

MODBUS转PROFINET网关连接与全数字交流伺服驱动系统的配置案例&#xff0c;这一通信方式极大地简化了工业自动化系统中的数据传输和控制过程。变频器和伺服电机可以实现数据交流和控制指令的实时传输&#xff0c;从而实现更精确更高效的生产过程。 案例简介&#xff1a;本案例是…

跟我学java|Stream流式编程——Stream 基础

一、流式编程的概念和作用 Java 流(Stream)是一连串的元素序列&#xff0c;可以进行各种操作以实现数据的转换和处理。流式编程的概念基于函数式编程的思想&#xff0c;旨在简化代码&#xff0c;提高可读性和可维护性。 Java Stream 的主要作用有以下几个方面&#xff1a; 简化…

苹果Find My查找芯片-伦茨科技ST17H6x支持苹果Find My认证

Apple「查找」Find My可通过庞大的“Apple Find My Network” 实现全球查找功能。无数iOS、iPadOS、macOS、watchOS激活设备与Find My 设备结合在一起&#xff0c;无需连接到Wi-Fi或者蜂窝网络&#xff0c;用户也可以给遗失的设备定位。对于任何iOS、iPadOS、macOS、watchOS设备…

LeetCode 49. 字母异位词分组

49. 字母异位词分组 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate"…

el-dialog的modal-class

今天发现个事 <el-dialogv-model"bindDialogVisible":title"bindDialogTitle"append-to-bodyclose-on-press-escapedraggablemodal-class"bindNdevice-dialog"width"500px"></el-dialog> 这个样式这样写生效 <style …