当前位置: 首页 > news >正文

uniapp在App端定义全局弹窗,当打开关闭弹窗会触发onShow、onHide生命周期怎么解决?

在uniapp(App端)中实现自定义弹框,可以通过创建一个透明页面来实现。点击进入当前页面时,页面背景会变透明,用户可以根据自己的需求进行自定义,最终效果类似于弹框。

遇到问题:当打开弹窗(进入弹窗页面)就会触发当前页面的onHide函数,关闭弹窗(跳出弹窗页面)就会触发上一页的onShow函数。有时候我们在onShow、onHide函数会定义自己的逻辑处理,比如在onShow函数发请求、在onHide销毁定时器,那么当打开关闭弹窗都会触发一遍。当打开关闭弹窗避免不触发自己定义的逻辑处理,这问题怎么解决呢?

解决逻辑:

1、我们可以在vuex定义一个变量,默认为false,当打开弹窗(进入弹窗页面)之前把该变量改成true,关闭弹窗(跳出弹窗页面)之后把该变量改成false。(或者直接使用uni.getStorageSync本地存储和uni.removeStorageSync删除缓存也可以。)

2、在调用弹窗的页面的onShow、onHide函数获取到该变量,判断变量如果为true,直接结束函数。

本码使用uniapp插件的ayy-modal全局弹窗,网址:uniapp 全局弹窗 - DCloud 插件市场

vuex的store 定义一个弹窗状态和改变状态的方法

	state: {ayyModalFlag: false,},mutations: {setAyyModalFlag(state, flag) {state.ayyModalFlag = flag;},

App.vue 把vuex的store定义在全局,方便调用

	import store from "@/store"globalData: {store,},

 ayy-modal/ayy-modal.js 进入和跳出弹窗页面改变弹窗状态

			const store = getApp().globalData.storestore.commit('setAyyModalFlag', false)
const store = getApp().globalData.storestore.commit('setAyyModalFlag', true)

在页面调用弹窗和处理打开关闭弹窗多次触发onShow和onHide函数的问题

		onShow() {// #ifdef APPif (this.$store.state.ayyModalFlag) return// #endifconsole.log("onShow---", );// 在这里处理你的逻辑},onHide() {// #ifdef APPif (this.$store.state.ayyModalFlag) return// #endifconsole.log("onHide===", );// 在这里处理你的逻辑},methods: {openAyyModel() {uni.$ayyModal.show({title: "我是标题",content: "我是内容",confirmFun: () => {}})},},

相关文章:

uniapp在App端定义全局弹窗,当打开关闭弹窗会触发onShow、onHide生命周期怎么解决?

在uniapp(App端)中实现自定义弹框,可以通过创建一个透明页面来实现。点击进入当前页面时,页面背景会变透明,用户可以根据自己的需求进行自定义,最终效果类似于弹框。 遇到问题:当打开弹窗(进入弹窗页面)就会触发当前页…...

计算机网络 实验七 NAT配置实验

一、实验目的 通过本实验理解网络地址转换的原理和技术,掌握扩展NAT/NAPT设计、配置和测试。 二、实验原理 NAT配置实验的原理主要基于网络地址转换(NAT)技术,该技术用于将内部私有网络地址转换为外部公有网络地址,从…...

数据结构——排序算法第二幕(交换排序:冒泡排序、快速排序(三种版本) 归并排序:归并排序(分治))超详细!!!!

文章目录 前言一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本 快排1.2.2 挖坑法 快排1.2.3 lomuto前后指针 快排 二、归并排序总结 前言 继上篇学习了排序的前面两个部分:直接插入排序和选择排序 今天我们来学习排序中常用的交换排序以及非常稳定的归并排序 快排可是有多…...

【kafka04】消息队列与微服务之Kafka 图形工具

Kafka 在 ZooKeeper 里面的存储结构 topic 结构 /brokers/topics/[topic] partition结构 /brokers/topics/[topic]/partitions/[partitionId]/state broker信息 /brokers/ids/[o...N] 控制器 /controller 存储center controller中央控制器所在kafka broker的信息 消费者 /c…...

剖析前后端 API 接口参数设计:JSON 数据结构化全攻略

在当今软件开发领域,前后端分离架构已成为主流趋势。而 API 接口作为前后端之间数据交互的桥梁,其设计的合理性对系统的可维护性和扩展性起着至关重要的作用。JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式&…...

vue3 多种方式接受props,定义ref,reactive

定义props 1 第一种 interface AddType { dialogStudyVisible: boolean; } const props defineProps<AddType>(); 第二种 // const props defineProps({ // dialogStudyVisible:{ // type:Boolean, // default:false // } // }) 第三种 // const …...

逻辑处理器核心指纹修改

navigator.hardwareConcurrency的属性,可以用来获取CPU的逻辑处理器核心数。 1、navigator.hardwareConcurrency接口定义&#xff1a; third_party\blink\renderer\core\frame\navigator_concurrent_hardware.idl // https://html.spec.whatwg.org/C/#navigator.hardwarecon…...

如何制作项目网页

一、背景 许多论文里经常会有这样一句话Supplementary material can be found at https://hri-eu.github.io/Lami/&#xff0c;这个就是将论文中的内容或者补充视频放到一个网页上&#xff0c;以更好的展示他们的工作。因此&#xff0c;这里介绍下如何使用前人提供的模板制作我…...

mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?

随笔 从千万粉丝“何同学”抄袭开源项目说起&#xff0c;为何纯技术死路一条&#xff1f; 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 我们的系统应该配置哪些监控报警项&#xff1f; 监控报警系统如何实现自监控? java 老矣&#xff0c;尚能饭否&#xff…...

1、正则表达式

grep匹配 grep用来过滤文本内容&#xff0c;以匹配要查询的结果。 grep root /etc/passwd&#xff1a;匹配包含root的行 -m 数字&#xff1a;匹配几次后停止 -v&#xff1a;取反-i&#xff1a;忽略字符的大小写&#xff0c;默认的&#xff0c;可以不加-n&#xff1a…...

Airsim安装问题:This project was made with a different version of the Unreal Engine.

本文记录如何在 Ubuntu 18.04 系统中配置 AirSim 和 Unreal Engine 4.27&#xff0c;并成功打开默认的 Blocks 环境项目。 环境说明 系统&#xff1a;Ubuntu 18.04Unreal Engine 版本&#xff1a;4.27AirSim&#xff1a;主分支文件路径&#xff1a; Unreal Engine&#xff1a…...

java八股-分布式服务的接口幂等性如何设计?

文章目录 接口幂等token Redis分布式锁 原文视频链接&#xff1a;讲解的流程特别清晰&#xff0c;易懂&#xff0c;收获巨大 【新版Java面试专题视频教程&#xff0c;java八股文面试全套真题深度详解&#xff08;含大厂高频面试真题&#xff09;】 https://www.bilibili.com/…...

vscode python code runner执行乱码

打开vscode code runner插件配置&#xff0c;如图所示&#xff1a; 然后在setting.json修改运行python的默认命令&#xff1a; 将原来 替换成 "python":"set PYTHONIOENCODINGutf8 && python", 参考&#xff1a;Vscode——python环境输出中文乱…...

Java中的继承详解

在Java编程中&#xff0c;继承&#xff08;Inheritance&#xff09;是一种面向对象编程&#xff08;OOP&#xff09;的核心概念&#xff0c;它允许一个类&#xff08;称为子类或派生类&#xff09;继承另一个类&#xff08;称为父类或基类&#xff09;的属性和方法。通过继承&a…...

kafka进阶_2.存储消息

文章目录 一、存储消息介绍二、副本同步2.1、数据一致性2.2、HW在副本之间的传递 如果想了解kafka基础架构和生产者架构可以参考 kafka基础和 Kafka进阶_1.生产消息。 一、存储消息介绍 数据已经由生产者Producer发送给Kafka集群&#xff0c;当Kafka接收到数据后&#xff0c…...

如何启用本机GPU硬件加速猿大师播放器网页同时播放多路RTSP H.265 1080P高清摄像头RTSP视频流?

目前市面上主流播放RTSP视频流的方式是用服务器转码方案&#xff0c;这种方案的好处是兼容性更强&#xff0c;可以用于不同的平台&#xff0c;比如&#xff1a;Windows、Linux或者手机端&#xff0c;但是缺点也很明显&#xff1a;延迟高、播放高清或者同时播放多路视频视频容易…...

如何更好地设计SaaS系统架构

SaaS&#xff08;Software as a Service&#xff09;架构设计的核心目标是满足多租户需求、支持弹性扩展和高性能&#xff0c;同时保持低成本和高可靠性。一个成功的SaaS系统需要兼顾技术架构、资源利用、用户体验和商业目标。本文从以下几个方面探讨如何更好地设计SaaS系统架构…...

表征对齐在训练DiT模型中的重要性

Diffusion Models专栏文章汇总&#xff1a;入门与实战 前言&#xff1a;训练过DiT模型的读者们肯定有所体会&#xff0c;相比于UNet模型训练难度大了很多&#xff0c;模型不仅很难收敛&#xff0c;而且非常容易训崩&#xff0c;其中一个很重要的原因是没有进行表征对齐&#xf…...

Qt中CMakeLists.txt解释大全

‌Qt从Qt5.15版本开始正式推荐使用CMake进行项目管理‌。 在Qt 5.15之前&#xff0c;虽然可以使用CMake进行构建&#xff0c;但Qt官方更推荐使用qmake。 然而&#xff0c;从Qt5.15开始&#xff0c;Qt官方正式推荐使用CMake作为主要的构建系统&#xff0c;并在Qt 6中进一步加强了…...

【在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: ‘module‘ object is not callable】

在 PyTorch 中使用 tqdm 显示训练进度条&#xff0c;并解决常见错误TypeError: module object is not callable 在进行深度学习模型训练时&#xff0c;尤其是在处理大规模数据时&#xff0c;实时了解训练过程中的进展是非常重要的。为了实现这一点&#xff0c;我们可以使用 tq…...

学术风控新范式:陌讯 AIGC 检测论文 AI 代写识别技术详解

摘要&#xff1a;随着生成式人工智能&#xff08;AIGC&#xff09;技术的爆发式迭代&#xff0c;GPT-4、文心一言等大模型已能生成逻辑连贯、格式规范的学术论文&#xff0c;AI代写、AI润色过度等学术不端行为呈现隐蔽化、规模化趋势&#xff0c;传统查重工具难以应对这一新型学…...

4大核心优势解决人脸处理难题:设计师与创作者的AI增强工具

4大核心优势解决人脸处理难题&#xff1a;设计师与创作者的AI增强工具 【免费下载链接】DZ-FaceDetailer a node for comfyui for restore/edit/enchance faces utilizing face recognition 项目地址: https://gitcode.com/gh_mirrors/dz/DZ-FaceDetailer 【问题诊断】为…...

LuckyLilliaBot QQ群管理自动化实战指南:从零搭建高效智能管理方案

LuckyLilliaBot QQ群管理自动化实战指南&#xff1a;从零搭建高效智能管理方案 【免费下载链接】LuckyLilliaBot NTQQ的OneBot API插件 项目地址: https://gitcode.com/gh_mirrors/li/LuckyLilliaBot LuckyLilliaBot是一款基于NTQQ客户端与OneBot11协议的QQ机器人开发框…...

Unity 工具之(SharpZipLib)跨平台中文Zip压缩与解压实战指南(附多线程优化)

1. 为什么选择SharpZipLib处理Unity中的Zip文件 在Unity项目开发中&#xff0c;资源打包和网络传输经常需要处理压缩文件。SharpZipLib作为.NET平台的老牌压缩库&#xff0c;相比Unity内置的压缩方案有三个不可替代的优势&#xff1a; 首先是对中文路径的完美支持。很多开发者都…...

OpenClaw核心揭秘:Agentic Loop如何驱动AI持续思考与行动?

上一篇讲了 Gateway——它像餐厅前台&#xff0c;负责接收订单、分发任务。 但订单到了厨房&#xff0c;厨师是怎么做菜的&#xff1f; 这就是 Agentic Loop&#xff08;推理循环&#xff09;的事了。 它是 OpenClaw 的"大脑"&#xff0c;决定 Agent 如何思考、如何行…...

如何用Marker实现PDF到Markdown的精准转换?三个技巧提升文档处理效率

如何用Marker实现PDF到Markdown的精准转换&#xff1f;三个技巧提升文档处理效率 【免费下载链接】marker 一个高效、准确的工具&#xff0c;能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式&#xff0c;支持多语言和复杂布局处理&#xff0c;可选集成 LLM 提升精度&…...

MindFormers文本生成接口

MindFormers的文本生成接口&#xff08;.generate()&#xff09;是大模型推理流程中控制生成行为、整合输入与输出的核心工具&#xff0c;其设计兼顾灵活性与易用性&#xff0c;支持从基础文本生成到高阶自定义配置的多类场景。一、核心入参&#xff1a;定义生成的“输入”与“…...

计算机毕业设计springboot在线病患管理系统 基于SpringBoot的智慧医疗就诊服务平台设计与实现 基于Java Web的医院数字化门诊住院一体化系统开发

计算机毕业设计springboot在线病患管理系统79jbb1co &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着我国医疗资源分布不均、基层医疗服务能力不足等问题的日益凸显&#xff…...

突破传统:用Arduino SI4735库打造全频段数字收音机方案

突破传统&#xff1a;用Arduino SI4735库打造全频段数字收音机方案 【免费下载链接】SI4735 SI473X Library for Arduino 项目地址: https://gitcode.com/gh_mirrors/si/SI4735 你是否曾梦想过亲手打造一台能接收全球广播的专业收音机&#xff1f;面对传统模拟电路的复杂…...

Simcenter Amesim 2023与Matlab 2023a联合仿真:从环境配置到实战例程详解

1. 联合仿真环境搭建前的准备工作 在开始Simcenter Amesim 2023与Matlab 2023a的联合仿真之前&#xff0c;我们需要做好充分的准备工作。这就像盖房子前要打好地基一样重要&#xff0c;否则后续工作可能会遇到各种意想不到的问题。 首先说说硬件要求。根据我的实测经验&#xf…...