微信小程序返回上一页监听

本文实现的是微信小程序在返回上一页时获取通知并自定义业务。

最简单的实现:

使用 wx.enableAlertBeforeUnload() 

优点:快速接入

缺点:手势不能识别、无法自定义弹窗内容(仅询问)

方法二:

page-container + 自定义返回点击

page-container有个好处,能识别返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口

唯一的缺点就是PC端打开小程序时,点击左上角的返回无法触发。

直接上代码(使用了TDesign 微信小程序组件库,可自行替换):

wxml:

<view><page-container show="{{visible}}" overlay="{{false}}" bind:beforeleave="onBeforeLeave"></page-container><view class="block"><t-navbart-class-placeholder="t-navbar-placeholder"t-class-content="t-navbar-content"title="标题文字2"t-class-title="nav-title"><view slot="left"><t-iconsize="48rpx"bind:tap="onNavigateBack"aria-role="button"aria-label="返回"name="chevron-left"/></view></t-navbar></view><text>test</text><t-dialogvisible="{{imageOnMiddleWithImage}}"confirm-btn="{{ {content: '确定', variant: 'base' } }}"cancel-btn="取消"bind:confirm="confirnDialog"bind:cancel="closeDialog"><t-image slot="top" id="loading-img" shape="round" width="72" height="72" /></t-dialog>
</view>

js:

Page({/*** 页面的初始数据*/data: {visible: true,imageOnMiddleWithImage: false,backTime: 0,},closeDialog() {this.setData({visible: true, // 点取消,重新展示该页面imageOnMiddleWithImage: false,backTime: 1,});},confirnDialog() {wx.navigateBack({delta: 1});},onBeforeLeave() {if (this.data.backTime > 0) {this.confirnDialog()return;}this.setData({imageOnMiddleWithImage: true,});},onNavigateBack() {this.onBeforeLeave()}
})

使用自定义返回键,监听点击事件;

使用page-container特性,处理所有非点击返回情况下的返回事件。

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

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

相关文章

Excel 统计某个字符串在指定区域出现的次数

【本文概要】 Excel 统计某个字符串在指定区域出现的次数&#xff1a; 1、Excel 统计一个单元格内的某字符串的出现次数 2、Excel 统计某一列所有单元格内的某字符串的出现次数 3、Excel 统计某一区域所有单元格内的某字符串的出现次数 1、Excel 统计一个单元格内的某字符串的出…

生物化学:药品药物 营养和补充剂信息 第三方认证信息 常见误区 汇总

常见维生素和矿物质成分表 成分名称好处副作用&#xff08;超量或敏感情况&#xff09;运作方式推荐日剂量&#xff08;成人&#xff09;剂量说明维生素A&#xff08;视黄醇&#xff09;视力、免疫、皮肤健康过量可致肝损伤、头痛、脱发调节视网膜功能、细胞分化700–900 g RA…

mock库知识笔记(持续更新)

文章目录 mock简介导入方式参数简介使用场景&#xff08;待更新&#xff09;常见问题总结&#xff08;待更新&#xff09;Python代码官网 mock简介 mock是一个模拟对象库&#xff0c;具有模拟其他python对象的功能&#xff0c;还能指定模拟对象的返回值和设置模拟对象的属性。…

扇形 圆形 面积公式

✅ 一、圆的面积公式 全圆面积&#xff1a; A circle π r 2 A_{\text{circle}} \pi r^2 Acircle​πr2 ✅ 二、扇形的面积公式&#xff08;两种制式&#xff09; 弧度制&#xff1a; A sector 1 2 r 2 θ A_{\text{sector}} \frac{1}{2} r^2 \theta Asector​21​r2θ …

怎样将win11+ubuntu双系统的ubuntu从机械硬盘迁移至固态硬盘(1)

将 Ubuntu 从机械硬盘迁移到固态硬盘是一个涉及多个步骤的过程。以下是一个基本的迁移指南&#xff1a; 1. 前期准备 1.1 备份数据&#xff1a; 确保你已备份数据&#xff0c;以防止在迁移过程中出现意外导致任何数据丢失。 1.2 固态硬盘安装&#xff1a; 确保固态硬盘正确…

js中common.js和ECMAScript.js区别

以下是关于 CommonJS 和 ECMAScript Modules&#xff08;ESM&#xff09;的详细对比分析&#xff0c;包含底层原理和示例说明&#xff1a; &#x1f9e9; 核心差异对比表 特性CommonJSES Modules来源Node.js 社区规范ECMAScript 语言标准加载方式动态加载&#xff08;运行时解…

玻纤效应的时序偏差

随着比特率继续飙升&#xff0c;光纤编织效应时序偏移正成为一个越来越严重的问题。对于 5GB/s 及以上的信号传输速率&#xff0c;它实际上会毁了您的一天。例如&#xff0c;左图显示由于 12.7 英寸的纤维编织效果&#xff0c;5GB/s 的接收眼完全闭合。使用 Agilent ADS 软件进…

异步上传石墨文件进度条前端展示记录(采用Redis中String数据结构实现)

事件起因是客户现场需要从石墨文档中获取文件信息&#xff0c;文件信息存在存在多个&#xff0c;进行批量上传。为了用户的友好型体验&#xff0c;需要做进行条展示的方式&#xff0c;具体实现见下文… 上传流程介绍 石墨文档支持从链接&#x1f517;方式获取文件信息&#xf…

3D建模的全景图谱:从55个工具到元宇宙的数字革命

3D建模已从专业工程师的工具箱演变为全民创作的数字语言。从代码驱动的精确建模到AI自动生成纹理&#xff0c;从开源协作到程序化生成城市&#xff0c;技术正重塑我们创造虚拟世界的方式。本文将系统解析55个核心3D建模工具/插件&#xff0c;涵盖在线编辑器、开源软件、程序化生…

jsrpc进阶模式 秒杀js前端逆向问题 burp联动进行爆破

案例演示 思路就是 这个 jsrpc远程加载加密函数的方法就是 在js代码中进行插入一个 远程加载的代码 从而实现 &#xff1a; 第一步还是使用 js_tools 进行 查找算法的位置 这个可以帮助我们找到明文>密文 加密算法函数的位置 因为这个需要我们进行js前端代码的修改 所以…

基于BERT-Prompt的领域句子向量训练方法

基于BERT-Prompt的领域句子向量训练方法 一、核心原理:基于BERT-Prompt的领域句子向量训练方法 论文提出一种结合提示学习(Prompt Learning)和BERT的领域句子向量训练方法,旨在解决装备保障领域文本的语义表示问题。核心原理如下: 以下通过具体例子解释传统词向量方法和…

Python PyMySQL

1.PyMySQL是什么 是Python操作mysql的一个包 2.PyMySQL使用基本步骤 2.1 创建连接 conn pymysql.connect(host10.248.53.148,password123456,port3306,userroot,databasetest_database,charsetutf8)2.2 游标 2.2.1 什么是游标 游标实际上是一种能从包括多条数据记录的结果…

OC—UI学习-1

OC—UI学习 UILabel UILabel是UIKit框架中的一个类Label主要参数 text&#xff1a;文本frame&#xff1a;位置框架backgroundcolor&#xff1a;背景颜色textAlignment&#xff1a;设置文本在Label中的位置textColor&#xff1a;文本颜色shadowColor&#xff1a;阴影颜色shado…

【应用密码学】实验七 Hash函数——SM3

一、实验要求与目的 理解哈希函数的基本原理及在密码学中的应用&#xff1b;掌握国密哈希标准 SM3 的算法结构&#xff1b;编程实现 SM3 摘要算法&#xff0c;包括消息填充、消息扩展、压缩函数及摘要输出&#xff1b;对中间变量 W、W′ 和 A~H 的迭代过程进行可视化&#xff…

进行性核上性麻痹护理之道:助力患者舒适生活

进行性核上性麻痹是一种缓慢进展的神经退行性疾病&#xff0c;主要影响患者的运动、语言和吞咽功能&#xff0c;给日常生活带来诸多不便。除了遵医嘱接受药物或物理治疗&#xff0c;科学的健康护理对延缓病情发展、提升生活质量尤为重要。 运动康复是护理的关键环节。由于患者常…

5G 核心网中 NRF 网元的功能、接口及参数详解

引言 在 5G 核心网的架构体系里,网络存储功能(Network Repository Function,NRF)占据着关键地位,承担着核心网网络功能(Network Function,NF)的注册、发现以及服务管理等重要任务,为整个 5G 网络的高效稳定运行提供了坚实支撑。接下来,让我们深入剖析 NRF 网元在注册…

HUAWEI交换机配置镜像口验证(eNSP)

技术术语&#xff1a; 流量观察口&#xff1a;就是我们常说的镜像口&#xff0c;被观察的流量的引流目的端口 流量源端口&#xff1a;企业生产端口&#xff0c;作为观察口观察对象。 命令介绍&#xff1a; [核心交换机]observe-port [观察端口ID或编号&#xff08;数字&am…

Spring AI Alibaba 发布企业级 MCP 分布式部署方案

作者&#xff1a; 影子&#xff0c;刘宏宇&#xff0c;刘军 Spring AI 通过集成 MCP 官方的 java sdk&#xff0c;让 Spring Boot 开发者可以非常方便的开发自己的 MCP 服务&#xff0c;把自己企业内部的业务系统通过标准 MCP 形式发布为 AI Agent 能够接入的工具&#xff1b;…

Redis实战-缓存篇(万字总结)

前言&#xff1a; 今天结合黑马点评这个项目&#xff0c;讲下有关Redis缓存的一些内容&#xff0c;例如缓存更新策略&#xff0c;缓存穿透&#xff0c;雪崩和击穿等。 今日所学&#xff1a; 什么是缓存缓存更新策略缓存穿透缓存雪崩缓存击穿缓存工具封存 目录 1.什么是缓存…

openFuyao开源发布,建设多样化算力集群开源软件生态

openFuyao 开源发布 随着 AI 技术的高速发展&#xff0c;算力需求呈爆发式增长&#xff0c;集群已成为主流生产方式。然而&#xff0c;当前集群软件生态发展滞后于硬件系统&#xff0c;面临多样化算力调度困难、超大规模集群软件支撑不足等挑战。这些问题的根源在于集群生产的…