uni-app 之 uni.showToast

uni.showToast 是 uni-app 中用于显示消息提示框的 API，可以用来展示简单的操作反馈或状态提示。

基本用法

uni.showToast({
  title: "提示内容",
  icon: "success",
  duration: 2000,
});

参数说明

参数	类型	默认值	必填	说明
title	String	-	是	提示的内容
icon	String	'success'	否	图标类型，有效值包括：'success'、'loading'、'none'
image	-	否	自定义图标的本地路径
duration	Number	1500	否	提示的延迟时间，单位毫秒
mask	Boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	Function	-	否	接口调用成功的回调函数
fail	Function	-	否	接口调用失败的回调函数
complete	Function	-	否	接口调用结束的回调函数（调用成功、失败都会执行）

icon 类型说明

• 'success': 显示成功图标
• 'loading': 显示加载图标
• 'none': 不显示图标

示例代码

成功提示

uni.showToast({
  title: "操作成功",
  icon: "success",
  duration: 2000,
});

加载提示

uni.showToast({
  title: "加载中...",
  icon: "loading",
  duration: 3000,
});

无图标提示

uni.showToast({
  title: "这是一条提示信息",
  icon: "none",
  duration: 2000,
});

使用自定义图标

uni.showToast({
  title: "自定义图标",
  image: "/static/icons/custom.png",
  duration: 2000,
});

防止触摸穿透

uni.showToast({
  title: "保存成功",
  icon: "success",
  mask: true,
  duration: 2000,
});

注意事项

1. uni.showToast 和 uni.showLoading 会共用一个弹窗，如果先后调用，后面的会覆盖前面的
2. duration 时间到达后会自动关闭提示框
3. 如果需要手动隐藏提示框，可以调用 uni.hideToast()
4. 在 App 和 H5 端，mask 属性为 true 时，会阻止用户交互直到提示框消失
5. 图片大小建议为 40px * 40px

相关 API

• uni.hideToast(): 隐藏消息提示框
• uni.showLoading(): 显示加载提示框
• uni.hideLoading(): 隐藏加载提示框