uni-app学习笔记二十四--showLoading和showModal的用法

news2025/6/9 14:48:26

showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

OBJECT参数说明

参数类型必填说明平台差异说明
titleString提示的文字内容,显示在loading的下方
maskBoolean是否显示透明蒙层,防止触摸穿透,默认:falseH5、App、微信小程序、百度小程序、抖音小程序(2.47.0+)
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

<script setup>
	uni.showLoading({
		title:"加载中...",
		mask:true
	})
	setTimeout(()=>{
		uni.hideLoading()
	},2000)
</script>

 

showModal(OBJECT)

显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。

OBJECT参数说明

参数类型必填说明平台差异说明
titleString提示的标题
contentString提示的内容
showCancelBoolean是否显示取消按钮,默认为 true
cancelTextString取消按钮的文字,默认为"取消"
cancelColorHexColor取消按钮的文字颜色,默认为"#000000"H5、微信小程序、百度小程序、抖音小程序(2.62.0+)、支付宝小程序
confirmTextString确定按钮的文字,默认为"确定"
confirmColorHexColor确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#576B95",百度小程序平台默认为"#3c76ff"H5、微信小程序、百度小程序、抖音小程序(2.62.0+)、支付宝小程序
editableBoolean是否显示输入框H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序(2.62.0+)
placeholderTextString显示输入框时的提示文本H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序(2.62.0+)
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

 示例代码1:

<script setup>
	function remove(){
		uni.showModal({
			title:"删除",
			//content:"是否确认删除,删除后数据无法恢复",
			editable:true,
			placeholderText:"请输入:确定回Y,取消回N",
			success:res=>{
				console.log(res)
				// if(res.confirm) uni.showToast({
				// 	title:"删除成功"
				// })
			}
		})
	}
</script>

运行效果:

获取用户输入的内容,通过content字段获取:

示例代码2:条件分支

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

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

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

相关文章

【Linux】centos软件安装

目录 Linux下安装软件的办法什么是yum使用yum试着安装软件查看yum源配置额外的第三方库 Linux下安装软件的办法 做为一个操作系统&#xff0c;与win和mac一样&#xff0c;安装软件无可厚非。那Linux下安装软件有哪些办法呢&#xff1f;第一种是直接下载源代码本地编译安装&…

基于Vue3.0的在线工具网站

文章目录 1、初始化项目1.1 创建项目1.2 安装vue路由1.3 安装UI库2、首页搭建2.0 页面布局2.1 页头2.2 侧边栏2.3 内容显示区域3、字符串加密解密功能实现3.1 页面构建3.2 实现加密/解密4、Json工具4.1 Json格式化4.1.1 搭建页面4.1.2 实现Json格式化4.2 Json转XML4.1.1 搭建页…

STM32H562----------串口通信(UART)

1、串口介绍 1.1、 数据通信概念 在单片机中我们常用的通信方式有 USART、IIC、SPI、CAN、USB 等; 1、数据通信方式 根据数据通信方式可分为串行通信和并行通信两种,如下图: 串行通信基本特征是数据逐位顺序依次传输,优点:传输线少成本低,抗干扰能力强可用于远距离传…

webpack其余配置

webpack搭建本地服务器 首先是要安装一个webpack-dev-server npm install webpack-dev-server -D 安装后在package.json中添加&#xff1a; {"name": "babel_core_demo","version": "1.0.0","main": "index.js"…

【CUDA 】第5章 共享内存和常量内存——5.3减少全局内存访问(2)

CUDA C编程笔记 第五章 共享内存和常量内存5.3 减少全局内存访问5.3.2 使用展开的并行规约思路reduceSmemUnroll4&#xff08;共享内存&#xff09;具体代码&#xff1a;运行结果意外发现书上全局加载事务和全局存储事务和ncu中这两个值相同 5.3.3 动态共享内存的并行规约reduc…

Python 训练营打卡 Day 46

通道注意力 一、什么是注意力 注意力机制是一种让模型学会「选择性关注重要信息」的特征提取器&#xff0c;就像人类视觉会自动忽略背景&#xff0c;聚焦于图片中的主体&#xff08;如猫、汽车&#xff09;。 transformer中的叫做自注意力机制&#xff0c;他是一种自己学习自…

Rust学习(1)

声明&#xff1a;学习来源于 《Rust 圣经》 变量的绑定和解构 变量绑定 let a "hello world":这个过程称之为变量绑定。绑定就是把这个对象绑定给一个变量&#xff0c;让这个变量成为它的主人。 变量可变性 Rust 变量默认情况下不可变&#xff0c;可以通过 mut …

鸿蒙仓颉语言开发实战教程:商城应用个人中心页面

又到了高考的日子&#xff0c;幽蓝君在这里祝各位考生朋友冷静答题&#xff0c;超常发挥。 今天要分享的内容是仓颉语言商城应用的个人中心页面&#xff0c;先看效果图&#xff1a; 下面介绍下这个页面的实现过程。 我们可以先分析下整个页面的布局结构。可以看出它是纵向的布…

智能生成完整 Java 后端架构,告别手动编写 ControllerServiceDao

在 Java 后端开发的漫长征途上&#xff0c;开发者们常常深陷繁琐的基础代码编写泥潭。尤其是 Controller、Service、Dao 这三层代码的手动编写&#xff0c;堪称开发效率的 “拦路虎”。从搭建项目骨架到填充业务逻辑&#xff0c;每一个环节都需要开发者投入大量精力&#xff0c…

Python----目标检测(yolov5-7.0安装及训练细胞)

一、下载项目代码 yolov5代码源 GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; in PyTorch > ONNX > CoreML > TFLite yolov5-7.0代码源 Release v7.0 - YOLOv5 SOTA Realtime Instance Segmentation ultralytics/yolov5 GitHub 二、创建虚拟环境 创建一个3.8…

【Linux】文件赋权(指定文件所有者、所属组)、挂载光驱(图文教程)

文章目录 文件赋权创建文件 testChmod查看文件的当前权限使用 chmod 命令修改权限验证权限关键命令总结答案汇总 光驱挂载确认文件是否存在打包压缩压缩验证创建 work 目录将压缩文件复制到 work 目录新建挂载点 /MNT/CDROM 并挂载光驱答案汇总 更多相关内容可查看 此篇用以解决…

第22讲、Odoo18 QWeb 模板引擎详解

Odoo QWeb 模板引擎详解与实战 Odoo 的 QWeb 是其自研的模板引擎&#xff0c;广泛应用于 HTML、XML、PDF 等内容的生成&#xff0c;支撑了前端页面渲染、报表输出、门户页面、邮件模板等多种场景。本文将系统介绍 QWeb 的核心用法、工作原理&#xff0c;并通过实战案例演示如何…

【原理解析】为什么显示器Fliker dB值越大,闪烁程度越轻?

显示器Fliker 1 显示器闪烁现象说明2 Fliker量测方法2.1 FMA法2.2 JEITA法问题答疑&#xff1a;为什么显示器Fliker dB值越大&#xff0c;闪烁程度越轻&#xff1f; 3 参考文献 1 显示器闪烁现象说明 当一个光源闪烁超过每秒10次以上就可在人眼中产生视觉残留&#xff0c;此时…

Bootstrap Table开源的企业级数据表格集成

Bootstrap Table 是什么 ‌Bootstrap Table 是一个基于 Bootstrap 框架的开源插件&#xff0c;专为快速构建功能丰富、响应式的数据表格而设计。‌ 它支持排序、分页、搜索、导出等核心功能&#xff0c;并兼容多种 CSS 框架&#xff08;如 Semantic UI、Material Design 等&am…

vue3表格使用Switch 开关

本示例基于vue3 element-plus 注&#xff1a;表格数据返回状态值为0、1。开关使用 v-model"scope.row.state 0" 会报错 故需要对写法做些修改&#xff0c;效果图如下 <el-table-column prop"state" label"入学状态" width"180" …

【11408学习记录】考研写作双核引擎:感谢信+建议信复合结构高分模板(附16年真题精讲)

感谢信建议信 英语写作2016年考研英语&#xff08;二&#xff09;真题小作文题目分析写作思路第一段第二段锦囊妙句9&#xff1a;锦囊妙句12&#xff1a;锦囊妙句13&#xff1a;锦囊妙句18&#xff1a; 第三段 妙句成文 每日一句词汇第一步&#xff1a;找谓语第二步&#xff1a…

一套个人知识储备库构建方案

写文章的初心是做知识沉淀。 好记性不如烂笔头&#xff0c;将阶段性的经验总结成文章&#xff0c;下次遇到相同的问题时&#xff0c;查起来比再次去搜集资料快得多。 然而&#xff0c;当文章越来越多时&#xff0c;有一个问题逐渐开始变得“严峻”起来。 比如&#xff0c;我…

行李箱检测数据集VOC+YOLO格式2083张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2083 标注数量(xml文件个数)&#xff1a;2083 标注数量(txt文件个数)&#xff1a;2083 …

实践提炼,EtherNet/IP转PROFINET网关实现乳企数字化工厂增效

乳企数字化工厂的核心技术应用 1. 智能质检&#xff1a;机器视觉协议网关的协同 液态奶包装线&#xff08;利乐罐装&#xff09;的漏码检测生产线&#xff0c;其高速产线&#xff08;20,000包/小时&#xff09;需实时识别微小缺陷&#xff0c;但视觉系统&#xff08;康耐视Ca…

从以物换物到DeFi:交易的演变与Arbitrum的DeFi生态

交易的本质&#xff1a;从以物换物到现代金融 交易是人类社会经济活动的核心&#xff0c;是通过交换资源&#xff08;如货物、服务或货币&#xff09;满足各方需求的行为。其本质是价值交换&#xff0c;旨在实现资源的优化配置。交易的历史可以追溯到人类文明的起源&#xff0…