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('用户点击取消');
		}
	}
});
相关推荐
致***锌34 分钟前
上证50ETF期权的交易时间是什么时候?
笔记
thginWalker35 分钟前
图解网络-小林coding笔记(持续更新)
网络·笔记
草堂春睡足2 小时前
【Datawhale AI夏令营】科大讯飞AI大赛(大模型技术)/夏令营:让AI理解列车排期表
人工智能·笔记
sssammmm2 小时前
AI入门学习-模型评估示例讲解
人工智能·学习
淮北4943 小时前
STL学习(四、队列和堆栈)
开发语言·c++·学习
落羽的落羽3 小时前
【C++】论如何封装红黑树模拟实现set和map
数据结构·c++·学习
xiaohe06014 小时前
🪀 Uni ECharts:也许是 uni-app 中使用 ECharts 最优雅的解决方案
uni-app
Olrookie4 小时前
若依前后端分离版学习笔记(一)——本地部署
笔记·后端·开源
PerfumerKarma4 小时前
【WebGPU学习杂记】数学基础拾遗(2)变换矩阵中的齐次坐标推导与几何理解
学习·线性代数·矩阵
knight_20244 小时前
嵌入式学习日志————对射式红外传感器计次
stm32·单片机·嵌入式硬件·学习