uniapp中常用的几种提示弹框
作者已经封装了更好用的XTools快去支持一下吧：XTools如何使用 有什么不明白可以联系QQ：1647161294
一、成功提示弹框
uni.showToast({
title: '成功提示',
//将值设置为 success 或者直接不用写icon这个参数
icon: 'success',
//显示持续时间为 2秒
duration: 2000
})效果如下：
成功提示
若icon参数值设置为none，将不显示“√”图标，只显示文字提示。
uni.showToast({
title: '成功提示',
icon: 'none',
duration: 2000
})效果如下：
无icon 成功提示
二、加载提示弹框
在执行数据查询、页面数据渲染等过程中弹出提示。以页面渲染为例：
//前端数据请求时，显示加载提示弹框
uni.showLoading({
title: '加载中...'
});
// 数据从后端接口返回后，提示弹框关闭
uni.hideLoading();同上，设置icon参数值为none，将不显示加载图标，只显示文字提示。
三、确认取消提示框
在执行数据删除等操作时弹出提示。
uni.showModal({
title: '提示',
content: '确认删除该条信息吗？',
success: function(res) {
if (res.confirm) {
// 执行确认后的操作
}
else {
// 执行取消后的操作
}
}
})四、列表选择提示弹框
执行某些列表选择时弹出提示。
uni.showActionSheet({
itemList: ['选项一', '选项二', '选项三'],
success (res) {
// 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
console.log(res.tapIndex)
},
fail (res) {
// 取消后的操作
}
})若需要设置字体颜色，可以配置itemColor参数。
uni.showActionSheet({
itemList: ['选项一', '选项二', '选项三'],
// 字体颜色
itemColor: "#55aaff",
success (res) {
// 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
console.log(res.tapIndex)
},
fail (res) {
// 取消后的操作
}
})五、自定义图标
可以自定义显示图标，如png、jpg、gif等格式。
uni.showToast({
title: '查询中',
//图片位置
image: '../../static/loading.gif',
duration: 2000
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
