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

ops/2024/11/29 18:54:10/

在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: () => {}})},},


http://www.ppmy.cn/ops/137720.html

相关文章

适配器模式(一种设计模式)

适配器模式, 也叫包装器模式. 将⼀个类的接⼝,转换成客⼾期望的另⼀个接⼝, 适配器让原本接⼝不兼容的类可以合作无间。 简单来说就是⽬标类不能直接使⽤, 通过⼀个新类进⾏包装⼀下, 适配调⽤⽅使⽤. 把两个不兼容的接⼝通过⼀定的⽅式使之兼容. 回忆一下slf4j模式…

23种设计模式-生成器(Builder)设计模式

文章目录 一.什么是生成器设计模式?二.生成器模式的特点三.生成器模式的结构四.生成器模式的优缺点五.生成器模式的 C 实现六.生成器模式的 Java 实现七.代码解析八. 总结 类图: 生成器设计模式类图 一.什么是生成器设计模式? 生成器模式&am…

linux(redhat8)如何安装mysql8.0之rpmtar双版本(最新版)(内网)(离线)

一.环境 系统版本:Red Hat 8.5.0-20 Java环境:build 1.8.0_181-b13 MYSQL:8.x版本 二、查看内核版本 #查看内核版本,根据内核版本下载对应的安装包 cat /proc/version 三、安装方式 一、rpm包方式 一、下载安装包 1. 登录网…

Web登录页面设计

记录第一个前端界面,暑假期间写的,用了Lottie动画和canvas标签做动画,登录和注册也连接了数据库。 图片是从网上找的,如有侵权私信我删除,谢谢啦~

线程与进程的个人理解

进程(Process): 一个程序在执行时,操作系统为其分配的资源(如内存、CPU 时间等)构成了一个进程。每个进程都有自己的独立的地址空间、堆栈和局部变量,它们之间不共享内存(除非通过特…

KST-3D01型胎儿超声仿真体模、吸声材料以及超声骨密度仪用定量试件介绍

一、KST-3D01型胎儿超声仿真体模 KST—3D01型胎儿超声体模,采用仿羊水环境中内置胎龄为7个月大仿胎儿设计。用于超声影像系统3D扫描演示装置表面轮廓呈现和3D重建。仿羊水超声影像呈暗回声(无回波)特性,仿胎儿超声影像呈对比明显…

实战OpenCV之人脸识别

基础入门 随着计算机视觉技术和深度学习的发展,人脸识别已经成为一项广泛应用的技术,涵盖了从安全监控、身份验证、智能家居到大型公共安全项目等多个领域。 人脸识别技术通常包括以下几个主要步骤。 图像采集:通过摄像头或其他图像采集设备,捕获包含人脸的图像或视频帧。 …

MAC 怎么终端怎么退出和进入Anaconda环境

mac安装完anaconda 后,命令行窗口默认使用conda的,取消默认,用以下一行代码在命令行运行即可,重启终端: conda config --set auto_activate_base false # 将false改为true设置默认环境为conda进入conda环境&#xff…