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.store
			store.commit('setAyyModalFlag', false)


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

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

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

					}
				})
			},
		},
相关推荐
掘金安东尼几秒前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~3 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务5 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛5 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑9 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭15 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿20 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
iOS阿玮23 分钟前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
无奈何杨29 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭36 分钟前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter