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('用户点击取消');
		}
	}
});
相关推荐
真的想上岸啊12 分钟前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
HuashuiMu花水木24 分钟前
PyTorch笔记1----------Tensor(张量):基本概念、创建、属性、算数运算
人工智能·pytorch·笔记
rui锐rui1 小时前
大数据学习2:HIve
大数据·hive·学习
凛铄linshuo2 小时前
爬虫简单实操2——以贴吧为例爬取“某吧”前10页的网页代码
爬虫·python·学习
大春儿的试验田2 小时前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
笑衬人心。3 小时前
Ubuntu 22.04 修改默认 Python 版本为 Python3 笔记
笔记·python·ubuntu
金色光环3 小时前
【Modbus学习笔记】stm32实现Modbus
笔记·stm32·学习
THMOM914 小时前
TinyWebserver学习(9)-HTTP
网络协议·学习·http
zyxzyx6664 小时前
Flyway 介绍以及与 Spring Boot 集成指南
spring boot·笔记
凌辰揽月4 小时前
Servlet学习
hive·学习·servlet