uni-app全局弹窗的实现方案

背景

为了解决uni-app 任意位置出现弹窗

解决方案

一、最初方案

受限于uni-app 调用组件需要每个页面都引入注册才可以使用,此方案繁琐,每个页面都要写侵入性比较强

二、改进方案

app端:新建一个页面进行跳转,可以实现伪弹窗(其实是打开一个背景透明的页面)

web端: 全局挂载body 插入一个弹窗

三、初步实现方案

就是 利用条件编译,web端写组件、app 端写页面,利用不同的生命周期,完成通用的逻辑

四、详细实现方案

1、完成弹窗页面开发

统一暴露一个show 方法,app 端使用 onload 监听事件触发,web端使用 show 方法触发

    <template><u-popup id="globalPopup-box" :show="params.show" :mode="params.mode" bgColor="transparent"@close="cancelSubmit(true)"><template v-if="params.type === 1"><view class="globalPopupContent" :class="{ globalPopupContentCenter: params.mode == 'center' }"><view class="title">{{ params.title }}</view></view></template><template v-else><view class="globalPopupContent" :class="{ globalPopupContentCenter: params.mode == 'center' }"><view class="title">{{ params.title }}</view></view></template></u-popup>
</template><script>
export default {name: "globalPopup",data() {return {eventChannel: null,params: {},}},// #ifdef APP-PLUSonLoad() {this.eventChannel = this.getOpenerEventChannel();this.eventChannel.on('globalPopup', (data) => {console.log('globalPopup:', data)this.init(data)})},// #endifmethods: {init(data) {this.params = data// 通用逻辑写在这里},// #ifdef H5show(data) {console.log('H5globalPopup:', data)this.init(data)},// #endifcancel() {// #ifdef APP-PLUSlet _this = this;uni.navigateBack({delta: 1,success() {_this.eventChannel.emit('cancel');}})// #endifthis.hide()// #ifdef APP-PLUSthis.params.cancel && this.params.cancel();// #endif},confirm() {// #ifdef APP-PLUSlet _this = this;uni.navigateBack({delta: 1,success() {_this.eventChannel.emit('confirm');}})// #endifthis.hide();// #ifdef APP-PLUSthis.params.confirm && this.params.confirm();// #endif},hide() {setTimeout(() => {this.params = {}}, 100)}}
}
</script><style>
page {background: transparent;
}
</style>

2、页面路由配置

,{"path" : "components/globalPopup/globalPopup","style": {"navigationStyle": "custom","backgroundColor": "transparent","app-plus": {"animationType": "fade-in","background": "transparent","popGesture": "none","bounce": "none","titleNView": false}}},          

3、main.js中全局挂载 globalPopup.js

globalPopup.js

const install = Vue => {Vue.prototype.$globalPopup = {show(params) {let pointPageUrl = getCurrentPages()[getCurrentPages().length - 1].route;if (pointPageUrl == 'components/globalPopup/globalPopup') returnuni.navigateTo({url: '/components/globalPopup/globalPopup',success: function (res) {// 利用事件 通知 目标页面res.eventChannel.emit('globalPopup', params)}})}}
}
export default install;

main.js 的编码 条件编译

// #ifdef APP-PLUS
import globalPopupjs from '@/components/globalPopup/globalPopup.js';
Vue.use(globalPopupjs);
// #endif// #ifdef H5
import globalPopup from '@/components/globalPopup/globalPopup.vue'
const PopupVue = Vue.extend(globalPopup);
const popupDom = new PopupVue();
Vue.prototype.$globalPopup = popupDom.$mount();
const lastEl = document.body.lastElementChild;
if (lastEl.id !== 'globalPopup-box') {setTimeout(() => {document.body.appendChild(Vue.prototype.$globalPopup.$el)}, 0)
}
// #endif

4、如何任意位置出现弹窗

利用接口触发,返回相关弹窗配置

接口触发逻辑

if (data.pop) {uni.$emit('showMyPopup', data.pop)}

监听逻辑

// 监听事件uni.$on('showMyPopup', (pop) => {if (!this.isShowGlobalPopup) {console.log(pop, 'showMyPopup')let {userQuestionStyleValue, // 样式值 1底部弹窗 2页中弹窗userQuestionTemplateValue, // 模板值 1是否类 2打分类,userQuestionInfo,userQuestionAnswerDTO,} = popthis.$globalPopup.show({id: pop.id,show: true,type: userQuestionTemplateValue == '1' ? 1 : 2,userQuestionInfo,title: userQuestionInfo.questionName,userQuestionAnswerDTO,mode: userQuestionStyleValue == '1' ? 'bottom' : 'center'})}});

效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/18854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

筛选的艺术:数组元素的精确提取

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、筛选的基本概念 二、筛选的实际应用案例 1. 筛选能被三整除的元素 2. 筛选小于特定值…

C++ list类

目录 0.前言 1.list介绍 1.1优势 1.2劣势 1.3容器属性 2.list使用 2.1构造函数 2.1.1默认构造函数 2.1.2填充构造函数 2.1.3范围构造函数 2.1.4拷贝构造函数 2.1.5初始化列表构造函数 2.2迭代器 2.2.1 begin() 2.2.2 end() 2.2.3 cbegin() 2.2.4 cend() 2.2.…

【C#】中托管与非托管对象区别、托管与非托管DLL区别

C 中的托管与非托管的区别_托管程序和非托管程序-CSDN博客 C# 中托管与非托管对象区别 在C#中&#xff0c;托管对象和非托管对象的主要区别在于内存管理和执行环境&#xff1a; 托管对象 (Managed Objects) 内存管理&#xff1a;托管对象的内存由.NET运行时&#xff08;CLR…

什么是CAS?

CAS&#xff08;比较并交换&#xff0c;Compare And Swap&#xff09;是一种多线程并发编程中的原子操作。它是一种乐观锁技术&#xff0c;用于解决 多线程环境下的数据竞争问题。CAS操作通过比较内存中的值与预期值是否相等来确定是否进行交换&#xff0c;如果相等&#xff0c…

PyMySQL连接池

背景 在用python写后端服务时候&#xff0c;需要与mysql数据库进行一些数据查询或者插入更新等操作。启动服务后接口运行一切正常&#xff0c; 隔了第二天去看服务日志就会报错&#xff0c;问题如下&#xff1a; pymysql.err.OperationalError: (2006, "MySQL server ha…

JavaScript-内存分配

内存空间 内存分为栈和堆 栈&#xff1a;由操作系统自动释放存放的变量值和函数值等。简单数据类型存放在栈中 栈会由低到高先入后出 堆&#xff1a;存储引用类型 &#xff08;对象&#xff09; 对象会先将数据存放在堆里面&#xff0c;堆的地址放在栈里面

关于virtualBox PC掉电后系统消失的解决方法

我们经常被会遇到笔记本电脑没电了&#xff0c;系统重新启动的情况。 这样会有出现虚拟机正在工作的时候&#xff0c;重启&#xff0c;导致虚拟机下次重启&#xff0c;系统出现问题。 直接上干货&#xff1a; 问题错误码 UUID {4105263a-f9d6-460e-b1e1-072377179af9} of the …

数字孪生智慧车站:全方位可视化管理平台

运用图扑数字孪生技术&#xff0c;智慧车站可视化管理平台实时模拟并监控车站运行状态&#xff0c;通过整合即时数据与历史数据&#xff0c;提供精准分析和预测。该平台支持乘客流量管理、设备运行监控、安全预警等多项功能&#xff0c;提高车站运营效率与安全性。直观的可视化…

N1 one-hot编码

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊# 前言 前言 onehot编码在机器学习比较常见&#xff0c;例如推荐系统中类别变量的处理等。 onehot 编码简介 One-hot编码&#xff08;one-hot encoding&…

进程发起DNS请求会fork进程吗

0 发起DNS请求本身并不会导致fork进程。当一个进程需要进行DNS解析时&#xff0c;它会使用操作系统提供的库函数&#xff08;如getaddrinfo、gethostbyname等&#xff09;发起DNS查询。这些库函数会通过网络接口向DNS服务器发送查询请求&#xff0c;并等待DNS服务器返回查询结…

这个橙子真的香!老司机徒手把玩香橙派Kunpeng Pro事后回忆录

说&#xff01;你是哪个门派&#xff1f; 香橙&#xff0c;芸香科柑橘属小乔木。枝通常有粗长刺&#xff0c;新梢及嫩叶柄常被疏短毛。叶厚纸质&#xff0c;翼叶倒卵状椭圆形&#xff0c;顶部圆或钝。。。 咦&#xff1f;小李&#xff1f;我们不是搞IT的嘛&#xff0c;怎么会有…

esp32s3 库函数功能解析

定时器 esp_restart 函数的主要功能是触发整个系统的重新启动。调用此函数后&#xff0c;ESP32 芯片会执行以下操作&#xff1a; 保存当前状态&#xff08;如果需要&#xff09;&#xff1a;在一些应用场景中&#xff0c;可能需要在重启前保存当前系统状态&#xff0c;比如日…

(函数)求一元二次方程的根(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <math.h>//声明函数&#xff1b; //判断条件等于0时&#xff1b; void zeor(double a, double b);//判断条件大于0时&#xff1b; void bigzeo…

浅谈 parallelStream和Stream 源码及其应用场景

上篇讲述了list.forEach()和list.stream().forEach() 异同点 谈到了并行流的概念&#xff0c;本篇则从源码出发&#xff0c;了解一下其原理。 一、流的初始操作流程 jdk8中 将Collection中加入了转换流的概念。 default Stream<E> stream() {return StreamSupport.str…

用wordpress模板搭建网站的好处

使用WordPress模板搭建网站的优势主要包括以下几点&#xff1a; 多样化选择&#xff1a;WordPress提供了数千种免费和付费模板&#xff0c;覆盖各种行业和风格&#xff0c;满足不同用户的需求。 易于使用和定制&#xff1a;WordPress界面简单易用&#xff0c;适合没有HTML或其…

第十三章 进程与线程

第十三章 进程与线程 程序与进程的概念 程序&#xff1a; 英文单词为Program&#xff0c;是指一系列有序指令的集合&#xff0c;使用编程语言所编写&#xff0c;用于实现一定的功能。 进程&#xff1a; 进程则是指启动后的程序&#xff0c;系统会为进程分配内存空间。 函数式…

【PingPong_注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

iOS ------ 多线程 pthread,NSThread

一&#xff0c;pthread 1.1pthread简介 pthread是一套通用的多线程的API&#xff0c;可以在Unix/Linux/Windows等系统跨平台使用&#xff0c;使用C语言编写&#xff0c;需要程序员自己管理线程的生命周期&#xff0c;使用难度大。 1.2pthread使用方法 1&#xff0c;首先要包…

奶奶也能看懂的耦合协调度分析

不会计算&#xff1f;跟着文献学起来~ 案例数据连接&#xff08;复制链接后粘贴到浏览器中&#xff09;&#xff1a; 耦合协调度数据​spssau.com/spssaudata.html?shareDataF363000CD033FF15E557BB75B9B0D412 假如你有这样一组数据&#xff1a; 如何进行计算分析耦合协调度…

【mmdet问题】error: unrecognized arguments: --local-rank=0

Note that --use-env is set by default in torchrun. If your script expects --local-rank argument to be set, please change it to read from os.environ[LOCAL_RANK] instead. See https://pytorch.org/docs/stable/distributed.html#launch-utility for 如果直接使用gi…