当前位置: 首页 > 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: () => {}})},},

http://www.lryc.cn/news/492578.html

相关文章:

  • 计算机网络 实验七 NAT配置实验
  • 数据结构——排序算法第二幕(交换排序:冒泡排序、快速排序(三种版本) 归并排序:归并排序(分治))超详细!!!!
  • 【kafka04】消息队列与微服务之Kafka 图形工具
  • 剖析前后端 API 接口参数设计:JSON 数据结构化全攻略
  • vue3 多种方式接受props,定义ref,reactive
  • 逻辑处理器核心指纹修改
  • 如何制作项目网页
  • mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?
  • 1、正则表达式
  • Airsim安装问题:This project was made with a different version of the Unreal Engine.
  • java八股-分布式服务的接口幂等性如何设计?
  • vscode python code runner执行乱码
  • Java中的继承详解
  • kafka进阶_2.存储消息
  • 如何启用本机GPU硬件加速猿大师播放器网页同时播放多路RTSP H.265 1080P高清摄像头RTSP视频流?
  • 如何更好地设计SaaS系统架构
  • 表征对齐在训练DiT模型中的重要性
  • Qt中CMakeLists.txt解释大全
  • 【在 PyTorch 中使用 tqdm 显示训练进度条,并解决常见错误TypeError: ‘module‘ object is not callable】
  • 数据结构-堆的实现和应用
  • 数据分析的尽头是web APP?
  • YOLO系列论文综述(从YOLOv1到YOLOv11)【第3篇:YOLOv1——YOLO的开山之作】
  • 容器和它的隔离机制
  • 【数据结构与算法】排序算法总结:冒泡 / 快排 / 直接插入 / 希尔 / 简单选择 / 堆排序 / 归并排序
  • Windows Serv 2019 虚拟机 安装Oracle19c,图文详情(超详细)
  • 数字孪生开发之 Three.js 插件资源库(2)
  • 小米C++ 面试题及参考答案下(120道面试题覆盖各种类型八股文)
  • OpenOCD之J-Link下载
  • 华为云云连接+squid进行正向代理上网冲浪
  • 情绪识别项目