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

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

					}
				})
			},
		},


http://www.kler.cn/a/412725.html

相关文章:

  • CodeTON Round 9 (Div. 1 + Div. 2, Rated, Prizes!)(前五道)
  • Python学习第十三天--面向对象,类和对象
  • 2024 APMCM亚太数学建模C题 - 宠物行业及相关产业的发展分析和策略(详细解题思路)
  • Tcon技术和Tconless技术介绍
  • QML学习 —— 32、自定义侧边滑动菜单(附源码)
  • 【Zookeeper 和 Kafka】为什么 Zookeeper 不用域名?
  • P5732 【深基5.习7】杨辉三角
  • QT QGridLayout控件 全面详解
  • 【设计模式】【结构型模式(Structural Patterns)】之代理模式(Proxy Pattern)
  • Python 网络爬虫入门教程:理论与实践
  • Spring Boot开发实战:从入门到构建高效应用
  • Spark垃圾回收
  • 活着就好20241128
  • 【设计模式】【结构型模式(Structural Patterns)】之外观模式(Facade Pattern)
  • 医学机器学习:数据预处理、超参数调优与模型比较的实用分析
  • T3 TensorFlow入门实战——天气识别
  • laravel-operate
  • 数学期望在算法中的应用
  • 开源 - Ideal库 - Excel帮助类,设计思路(一)
  • 【人工智能】使用Python实现序列到序列(Seq2Seq)模型进行机器翻译
  • Ollama - 简化使用本地大语言模型
  • 双十一线上服务调用链路追踪SkyWalking实战分析
  • PostgreSQL表膨胀问题解析
  • python-docx -- 读取word页眉、页脚
  • 上海迪士尼奇幻冬日巡游:IP营销如何出圈?
  • wordpress拖拽式自定义文章排序插件Simple Custom Post Order,支持对wordpress文章、页面、自定义文章进行自定义排序