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

embedded/2024/11/30 11:11:48/

在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/embedded/141731.html

相关文章

111PHP 循环 - For 循环

可以根据条件来执行循环次数 条件语句: for(初始值;条件语句;增量){ 需要执行的代码 } 初始值:主要是初始化一个变量值,用于设置一个计数器。条件:循环执行的限制条件。如果为 TRUE,则循环继续。如果为 FALSE&#xf…

使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件

前言 记录一下使用 Vite 创建 Vue3TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。 一、使用 Vite 创建 Vue3TS 项目 1.新建一个 temp 文件夹 (1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹&…

Kylin Server V10 下 Nacos 集群部署

集群部署架构图 端口 与主端口的偏移量 描述 8848 0 主端口,客户端、控制台及

亚马逊开发视频人工智能模型,The Information 报道

根据《The Information》周三的报道,电子商务巨头亚马逊(AMZN)已开发出一种新的生成式人工智能(AI),不仅能处理文本,还能处理图片和视频,从而减少对人工智能初创公司Anthropic的依赖…

安卓-碎片的使用入门

1.碎片(Fragment)是什么 Fragment是依赖于Activity的,不能独立存在的,是Activity界面中的一部分,可理解为模块化的Activity,它能让程序更加合理和充分地利用大屏幕的空间,因而在平板上应用得非常广泛. Fragment不能独立存在,必须…

Web day05 Mysql 基础

目录 1.DDL:定义 数据库 表 字段: 数据库操作: 表操作: 约束: 数据类型: 案例: 表的其他操作: 修改表的结构: 2.DML:对表的数据 进行 增 删 改&…

点云3DHarris角点检测算法推导

先回顾2D的Harris角点检测算法推导 自相关矩阵是Harris角点检测算法的核心之一,它通过计算图像局部区域的梯度信息来描述该区域的特征。在推导Harris角点检测算法中的自相关矩阵时,我们首先需要了解自相关矩阵的基本思想和数学背景。 参考 1. 能量函数…

【CVPR24】One-Prompt to Segment All Medical Images

论文介绍 论文: One-Prompt to Segment All Medical Images 代码: https://github.com/KidsWithTokens/one-prompt 会议与年份:CVPR24 全文概述 本文介绍了一种新的医疗图像分割方法—One-Prompt Segmentation。传统的分割方法需要用户在推理阶段为每个样本提供提示…