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接口定义: 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/,这个就是将论文中的内容或者补充视频放到一个网页上,以更好的展示他们的工作。因此,这里介绍下如何使用前人提供的模板制作我…...
mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?
随笔 从千万粉丝“何同学”抄袭开源项目说起,为何纯技术死路一条? 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 我们的系统应该配置哪些监控报警项? 监控报警系统如何实现自监控? java 老矣,尚能饭否ÿ…...
1、正则表达式
grep匹配 grep用来过滤文本内容,以匹配要查询的结果。 grep root /etc/passwd:匹配包含root的行 -m 数字:匹配几次后停止 -v:取反-i:忽略字符的大小写,默认的,可以不加-n:…...
Airsim安装问题:This project was made with a different version of the Unreal Engine.
本文记录如何在 Ubuntu 18.04 系统中配置 AirSim 和 Unreal Engine 4.27,并成功打开默认的 Blocks 环境项目。 环境说明 系统:Ubuntu 18.04Unreal Engine 版本:4.27AirSim:主分支文件路径: Unreal Engine:…...
java八股-分布式服务的接口幂等性如何设计?
文章目录 接口幂等token Redis分布式锁 原文视频链接:讲解的流程特别清晰,易懂,收获巨大 【新版Java面试专题视频教程,java八股文面试全套真题深度详解(含大厂高频面试真题)】 https://www.bilibili.com/…...
vscode python code runner执行乱码
打开vscode code runner插件配置,如图所示: 然后在setting.json修改运行python的默认命令: 将原来 替换成 "python":"set PYTHONIOENCODINGutf8 && python", 参考:Vscode——python环境输出中文乱…...
Java中的继承详解
在Java编程中,继承(Inheritance)是一种面向对象编程(OOP)的核心概念,它允许一个类(称为子类或派生类)继承另一个类(称为父类或基类)的属性和方法。通过继承&a…...
kafka进阶_2.存储消息
文章目录 一、存储消息介绍二、副本同步2.1、数据一致性2.2、HW在副本之间的传递 如果想了解kafka基础架构和生产者架构可以参考 kafka基础和 Kafka进阶_1.生产消息。 一、存储消息介绍 数据已经由生产者Producer发送给Kafka集群,当Kafka接收到数据后,…...
如何启用本机GPU硬件加速猿大师播放器网页同时播放多路RTSP H.265 1080P高清摄像头RTSP视频流?
目前市面上主流播放RTSP视频流的方式是用服务器转码方案,这种方案的好处是兼容性更强,可以用于不同的平台,比如:Windows、Linux或者手机端,但是缺点也很明显:延迟高、播放高清或者同时播放多路视频视频容易…...
如何更好地设计SaaS系统架构
SaaS(Software as a Service)架构设计的核心目标是满足多租户需求、支持弹性扩展和高性能,同时保持低成本和高可靠性。一个成功的SaaS系统需要兼顾技术架构、资源利用、用户体验和商业目标。本文从以下几个方面探讨如何更好地设计SaaS系统架构…...
表征对齐在训练DiT模型中的重要性
Diffusion Models专栏文章汇总:入门与实战 前言:训练过DiT模型的读者们肯定有所体会,相比于UNet模型训练难度大了很多,模型不仅很难收敛,而且非常容易训崩,其中一个很重要的原因是没有进行表征对齐…...
Qt中CMakeLists.txt解释大全
Qt从Qt5.15版本开始正式推荐使用CMake进行项目管理。 在Qt 5.15之前,虽然可以使用CMake进行构建,但Qt官方更推荐使用qmake。 然而,从Qt5.15开始,Qt官方正式推荐使用CMake作为主要的构建系统,并在Qt 6中进一步加强了…...
【在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: ‘module‘ object is not callable】
在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: module object is not callable 在进行深度学习模型训练时,尤其是在处理大规模数据时,实时了解训练过程中的进展是非常重要的。为了实现这一点,我们可以使用 tq…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
