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

showLoading(OBJECT)

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

OBJECT参数说明

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

示例代码:

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

showModal(OBJECT)

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

OBJECT参数说明

参数 类型 必填 说明 平台差异说明
title String 提示的标题
content String 提示的内容
showCancel Boolean 是否显示取消按钮,默认为 true
cancelText String 取消按钮的文字,默认为"取消"
cancelColor HexColor 取消按钮的文字颜色,默认为"#000000" H5、微信小程序、百度小程序、抖音小程序(2.62.0+)、支付宝小程序
confirmText String 确定按钮的文字,默认为"确定"
confirmColor HexColor 确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#576B95",百度小程序平台默认为"#3c76ff" H5、微信小程序、百度小程序、抖音小程序(2.62.0+)、支付宝小程序
editable Boolean 是否显示输入框 H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序(2.62.0+)
placeholderText String 显示输入框时的提示文本 H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序(2.62.0+)
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码1:

java 复制代码
<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:条件分支

javascript 复制代码
uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});
相关推荐
He BianGu30 分钟前
【笔记】在WPF中 BulletDecorator 的功能、使用方式并对比 HeaderedContentControl 与常见 Panel 布局的区别
笔记·wpf
2501_916013742 小时前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
ideaout技术团队3 小时前
leetcode学习笔记2:多数元素(摩尔投票算法)
学习·算法·leetcode
十铭忘4 小时前
Bug——PaddleX人脸识别报错:Process finished with exit code -1073741819 (0xC0000005)
学习·bug
less is more_09305 小时前
风力发电机输出功率模型综述
笔记·学习·数学建模
丰锋ff6 小时前
2006 年真题配套词汇单词笔记(考研真相)
笔记·学习·考研
洛可可白8 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
想唱rap8 小时前
直接选择排序、堆排序、冒泡排序
c语言·数据结构·笔记·算法·新浪微博
早睡冠军候选人8 小时前
K8s学习----节点(Node)
运维·学习·云原生·容器·kubernetes
梅见十柒9 小时前
Linux/UNIX系统编程手册笔记:POSIX
linux·服务器·网络·笔记·tcp/ip·udp·unix