uniapp定义new plus.nativeObj.View实现APP端全局弹窗

为什么要用new plus.nativeObj.View在APP端实现弹窗？因为uni.showModal在APP端太难看了。

AppPopupView弹窗函数参数定义

参数一:弹窗信息(所有属性可不填，会有默认值)

1.title:"", //标题

2.content:"", //内容

3.confirmBoxColor:"", //确认按钮背景色

4.cancelText:"", //取消按钮文字

5.confirmText:" //确认按钮文字"

6.showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false

7.maskClick: true // 是否允许点击遮罩层关闭弹窗 是:true 否:false(默认)

参数二(cd1):点击确认按钮执行逻辑，

参数三(cd2):点击取消按钮执行逻辑。

/utils/AppPopupView.js 定义弹窗文件

export default AppPopupViewfunction AppPopupView({title = '提示',content = '',confirmBoxColor = '#41a863',cancelText = "取消",confirmText = "确认",showCancel = true,maskClick = false,
} = {}, cd1, cd2) {let screenWidth = plus.screen.resolutionWidthlet screenHeight = plus.screen.resolutionHeightconst popupViewWidth = screenWidth * 0.7const popupViewHeight = 80 + 20 + 20 + 90 + 10const viewContentPadding = 20const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2))let maskLayer = new plus.nativeObj.View('maskLayer', {top: '0px',left: '0px',height: '100%',width: '100%',backgroundColor: 'rgba(0,0,0,0.2)'})let popupViewContentList = [{tag: 'font',id: 'title',text: title,textStyles: {size: '18px',color: "#333",weight: "bold",whiteSpace: "normal"},position: {top: '55px',left: viewContentPadding + "px",width: viewContentWidth + "px",height: "30px",}}]popupViewContentList.push({tag: 'font',id: 'content',text: content || '确认要操作吗?',textStyles: {size: '14px',color: "#666",lineSpacing: "50%",align: "left"},position: {top: "100px",left: viewContentPadding + "px",width: viewContentWidth + "px",height: "18px",}});if (showCancel === true) { // 添加取消按钮popupViewContentList.push({tag: 'rect',id: 'cancelBox',rectStyles: {radius: "3px",borderColor: "#f1f1f1",borderWidth: "1px",},position: {bottom: viewContentPadding + 'px',left: viewContentPadding + "px",width: (viewContentWidth - viewContentPadding) / 2 + "px",height: "30px",}})popupViewContentList.push({tag: 'font',id: 'cancelText',text: cancelText,textStyles: {size: '14px',color: "#666",lineSpacing: "0%",whiteSpace: "normal"},position: {bottom: viewContentPadding + 'px',left: viewContentPadding + "px",width: (viewContentWidth - viewContentPadding) / 2 + "px",height: "30px",}})}popupViewContentList.push({tag: 'rect',id: 'confirmBox',rectStyles: {radius: "3px",color: confirmBoxColor,},position: {bottom: viewContentPadding + 'px',left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",width: (viewContentWidth - viewContentPadding) / 2 + "px",height: "30px",}})popupViewContentList.push({tag: 'font',id: 'confirmText',text: confirmText || '确认',textStyles: {size: '14px',color: "#FFF",lineSpacing: "0%",whiteSpace: "normal"},position: {bottom: viewContentPadding + 'px',left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",width: (viewContentWidth - viewContentPadding) / 2 + "px",height: "30px",}})if (showCancel === false) { // 如果只显示确认按钮需要重新设置按钮的width和leftfor (let i = 0; i < popupViewContentList.length; i++) {let item = popupViewContentList[i]if (item.id === 'confirmBox' || item.id === 'confirmText') {item.position.left = viewContentPadding + "px"item.position.width = viewContentWidth + "px"}}}let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单tag: "rect",top: (screenHeight - popupViewHeight) / 2 + "px",left: '15%',height: popupViewHeight + "px",width: "70%"})popupView.drawRect({color: "#FFFFFF",radius: "20px"}, {top: "40px",height: popupViewHeight - 40 + "px",})popupView.addEventListener("click", e => {let maxTop = popupViewHeight - viewContentPaddinglet maxLeft = popupViewWidth - viewContentPaddinglet buttonWidth = (viewContentWidth - viewContentPadding) / 2if (e.clientY > maxTop - 30 && e.clientY < maxTop) {let maxTop = popupViewHeight - viewContentPadding;let maxLeft = popupViewWidth - viewContentPadding;let buttonWidth = (viewContentWidth - viewContentPadding) / 2;if (showCancel) {if (e.clientY > maxTop - 30 && e.clientY < maxTop) {if (e.clientX > viewContentPadding && e.clientX < maxLeft - buttonWidth -viewContentPadding) {// console.log("取消"); maskLayer.hide()popupView.hide()cd2 && cd2()}if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {// console.log("确认");maskLayer.hide()popupView.hide()cd1 && cd1()}}} else {maskLayer.hide()popupView.hide()cd1 && cd1()}}})popupView.draw(popupViewContentList)// 点击遮罩层maskLayer.addEventListener("click", function() { //处理遮罩层点击if (maskClick) {maskLayer.hide();popupView.hide();}})// 显示弹窗maskLayer.show()popupView.show()
}

在main.js挂载到全局

// #ifdef APP-PLUS
import AppPopupView from '@/utils/AppPopupView.js';
Vue.prototype.AppPopupView = AppPopupView;
// #endif

页面调用全局弹窗

<script>export default {onLoad() {// #ifdef APP-PLUS// 参数一:弹窗信息(所有属性可不填，会有默认值)let AppPopupInfo = {// title:"", //标题// content:"", //内容// confirmBoxColor:"", //确认按钮背景色// cancelText:"", //取消按钮文字// confirmText:" //确认按钮文字",  // showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false// maskClick: true // 是否允许点击遮罩层关闭弹窗 是:true 否:false(默认) }// 参数二:点击确认按钮执行逻辑const affirmBtn = () => {console.log("点击了确认按钮");}// 参数三:点击取消按钮执行逻辑const cancelBtn = () => {console.log("点击了取消按钮");}this.AppPopupView(AppPopupInfo, affirmBtn, cancelBtn)// #endif},}
</script>

效果图

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

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

相关文章

互联网摸鱼日报(2024-11-22)

互联网摸鱼日报(2024-11-22)

互联网摸鱼日报(2024-11-22) 36氪新闻 学习马斯克不丢人&#xff0c;脸书也开始改造自己了 旅游行业趋势变了&#xff0c;增长还能从哪里寻找&#xff1f; 大厂入局后&#xff0c;小型小游戏团队能否继续喝一口汤&#xff1f; 一拥而上的“跨界咖啡”&#xff0c;是“走心”…
阅读更多...
网络安全——SpringBoot配置文件明文加密

网络安全——SpringBoot配置文件明文加密

一、前言 在日常开发中&#xff0c;项目中会有很多配置文件。比如SpringBoot项目核心的数据库配置、Redis账号密码配置都在properties、yml配置文件 中。 如果这些信息以明文的方式存储&#xff0c;你的电脑被拿去修理&#xff0c;就会容易泄露&#xff0c;一旦被其他人获取到…
阅读更多...
Linux系统编程之进程基础知识

Linux系统编程之进程基础知识

概述 在Linux系统中&#xff0c;进程是指一个正在运行的程序实例。每个进程都有一个唯一的进程标识符&#xff0c;即PID&#xff0c;操作系统通过这个PID来唯一识别和管理各个进程。进程不仅仅是程序代码的运行实例&#xff0c;它还包含了程序运行时所需的各种资源&#xff0c;…
阅读更多...
docker离线安装linux部分问题整理

docker离线安装linux部分问题整理

0:离线安装docker过程命令 echo $PATH tar -zxvf docker-26.1.4.tgz chmod 755 -R docker cp docker/* /usr/bin/ root 权限 vim /etc/systemd/system/docker.service --------- [Unit] DescriptionDocker Application Container Engine Documentationhttps://docs.do…
阅读更多...
2024智能机器人与自动控制国际学术会议 （IRAC 2024）

2024智能机器人与自动控制国际学术会议 （IRAC 2024）

主办&#xff0c;承办&#xff0c;支持单位 会议官网 www.icirac.org 大会时间&#xff1a;2024年11月29-12月1日 大会简介 2024智能机器人与自动控制国际学术会议 &#xff08;IRAC 2024&#xff09;由华南理工大学主办&#xff0c;会议将于2024年11月29日-12月1日在中国广…
阅读更多...
【Pytest+Yaml+Allure】实现接口自动化测试框架

【Pytest+Yaml+Allure】实现接口自动化测试框架

一、框架思想 requestsyamlpytestallure实现接口自动化框架。结合数据驱动和分层思想&#xff0c;将代码与数据分离&#xff0c;易维护&#xff0c;易上手。使用yaml编写编写测试用例&#xff0c;利用requests库发送请求&#xff0c;使用pytest管理用例&#xff0c;allure生成…
阅读更多...
利用 Jsoup 进行高效 Web 抓取与 HTML 处理

利用 Jsoup 进行高效 Web 抓取与 HTML 处理

Jsoup 是一款 Java 的 HTML 解析器&#xff0c;可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API&#xff0c;可通过 DOM&#xff0c;CSS 以及类似于 JQuery 的操作方法来取出和操作数据。 官网&#xff1a;https://jsoup.org/ 中文文档&#xff1a;Jsou…
阅读更多...
蓝桥杯不知道叫什么题目

蓝桥杯不知道叫什么题目

小蓝有一个整数&#xff0c;初始值为1&#xff0c;他可以花费一些代价对这个整数进行变换。 小蓝可以花贵1的代价将教数增加1。 小蓝可以花费3的代价将整数增加一个值,这个值是整数的数位中最大的那个(1到9) .小蓝可以花费10的代价将整数变为原来的2倍, 例如&#xff0c;如果整…
阅读更多...
【JavaEE初阶】枫叶经霜艳,梅花透雪香-计算机是如何运行的?

【JavaEE初阶】枫叶经霜艳,梅花透雪香-计算机是如何运行的?

本篇博客给大家带来的是与计算机相关的知识点, 包括:计算机的组成, 指令, 进程(重点). 文章专栏: JavaEE初阶 若有问题 评论区见 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 1. 计算机的组成 1.1 计算机的发展史 计算…
阅读更多...
SuperMap Objects组件式GIS开发技术浅析

SuperMap Objects组件式GIS开发技术浅析

引言 随着GIS应用领域的扩展&#xff0c;GIS开发工作日显重要。一般地&#xff0c;从平台和模式上划分&#xff0c;GIS二次开发主要有三种实现方式&#xff1a;独立开发、单纯二次开发和集成二次开发。上述的GIS应用开发方式各有利弊&#xff0c;其中集成二次开发既可以充分利…
阅读更多...
Linux网络——NAT/代理服务器

Linux网络——NAT/代理服务器

一.NAT技术 1.NAT IP转换 之前我们讨论了, IPv4 协议中, IP 地址数量不充足的问题&#xff0c;NAT 技术就是当前解决 IP 地址不够用的主要手段, 是路由器的一个重要功能。 NAT 能够将私有 IP 对外通信时转为全局 IP. 也就是一种将私有 IP 和全局IP 相互转化的技术方法: 很…
阅读更多...
前端安全和解决方案

前端安全和解决方案

提到这个我可能想到的就是不要暴露太多的账号密码信息。一些页面的请求和操作要加上权限。 然后下面就详细的介绍前端可能遇到的安全问题以及解决方法。 首先比较常见的前端的安全性问题就是跨站脚本攻击&#xff08;XSS&#xff09;。跨站请求伪造&#xff08;csrf&#xff…
阅读更多...
使用八爪鱼爬虫抓取汽车网站数据，分析舆情数据

使用八爪鱼爬虫抓取汽车网站数据，分析舆情数据

我是做汽车行业的&#xff0c;可以用八爪鱼爬虫抓取汽车之家和微博上的汽车文章内容&#xff0c;分析各种电动汽车口碑数据。 之前&#xff0c;我写过很多Python网络爬虫的案例&#xff0c;使用requests、selenium等技术采集数据&#xff0c;这次尝试去采集小米SU7在微博、汽车…
阅读更多...
C语言笔记（自定义类型：结构体、枚举、联合体 ）

C语言笔记（自定义类型：结构体、枚举、联合体 ）

前言 本文对自定义类型的结构体创建、使用、结构体的存储方式和对齐方式&#xff0c;枚举的定义、使用方式以及联合体的定义、使用和存储方式展开叙述&#xff0c;如有错误&#xff0c;请各位指正。 目录 前言 1 结构体 1.1 结构体的声明 1.2 结构体的自引用 1.3 结构体变…
阅读更多...
网络安全问题与大忌

网络安全问题与大忌

“老三样&#xff0c;堵漏洞、做高墙、防外攻&#xff0c;防不胜防。” 日前&#xff0c;中国工程院沈昌祥院士这样概括中国信息安全的基本状况。 信息安全提了这么些年&#xff0c;究竟国内的网络如何脆弱&#xff0c;如何不堪一击&#xff0c;恐怕常人是难以想象的。公安部计…
阅读更多...
3.langchain中的prompt模板 (few shot examples in chat models)

3.langchain中的prompt模板 (few shot examples in chat models)

本教程将介绍如何使用LangChain库和智谱清言的 GLM-4-Plus 模型来理解和推理一个自定义的运算符&#xff08;例如使用鹦鹉表情符号&#x1f99c;&#xff09;。我们将通过一系列示例来训练模型&#xff0c;使其能够理解和推断该运算符的含义。 环境准备 首先&#xff0c;确保…
阅读更多...
【消息序列】详解(6)：深入探讨缓冲区管理与流量控制机制

【消息序列】详解(6)：深入探讨缓冲区管理与流量控制机制

目录 一、概述 1.1. 缓冲区管理的重要性 1.2. 实现方式 1.2.1. HCI_Read_Buffer_Size 命令 1.2.2. HCI_Number_Of_Completed_Packets 事件 1.2.3. HCI_Set_Controller_To_Host_Flow_Control 命令 1.2.4. HCI_Host_Buffer_Size 命令 1.2.5. HCI_Host_Number_Of_Complete…
阅读更多...
如何使用OCR技术批量识别图片中的文字并重命名文件，OCR 技术批量识别图片中的文字可能出现的错误

如何使用OCR技术批量识别图片中的文字并重命名文件，OCR 技术批量识别图片中的文字可能出现的错误

字符识别错误 形近字混淆&#xff1a;例如 “已” 和 “己”、“未” 和 “末” 等&#xff0c;由于外形极为相似&#xff0c;OCR 软件在识别时可能出现误判&#xff0c;将原本正确的字识别成与之形近的另一个字。比如在识别一篇手写的文章中&#xff0c;手写体的 “已” 可能就…
阅读更多...
Qt | 开发技能提升档次哈

Qt | 开发技能提升档次哈

点击上方"蓝字"关注我们 01、Creator常用快捷键 >>> F1 查看帮助 F2 跳转到函数定义 Shift+F2 声明和定义之间切换 F3 查找下一个 F4 头文件和源文件之间切换 Ctrl+1 欢迎模式 Ctrl+2 编辑模…
阅读更多...
kafka消费者组和分区数之间的关系是怎样的？

kafka消费者组和分区数之间的关系是怎样的？

消费者组和分区数之间的关系决定了Kafka中消息的消费方式和负载均衡。合理配置分区数和消费者数量对于优化Kafka的性能和资源利用率至关重要。以下是这种关系的几个关键点&#xff1a; 一个分区只能被同一组的一个消费者消费&#xff1a;这是为了保证消息的顺序性。在同一个消费…
阅读更多...
最新文章

Copyright @ 2022~2023