uni-app学习笔记二十三--交互反馈showToast用法

原创于 2025-06-08 08:28:18 发布 · 948 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #学习 #笔记

showToast部分文档位于uniapp官网-->API-->界面：uni.showToast(OBJECT) | uni-app官网

uni.showToast(OBJECT)

用于显示消息提示框

OBJECT参数说明

参数	类型	必填	说明	平台差异说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明，默认：success。
image	String	否	自定义图标的本地路径（app端暂不支持gif）	App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序、抖音小程序（2.47.0+）
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。	App
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

title：提示的内容，当用微信小程序打开时，通常只显示一行7个字符，如果要显示全部文字，需要将icon的值设为null，同时images也不要设置值；

mask:设为true时，弹窗显示其间，弹窗外的内容点击操作无效，需等弹窗消失点击才生效。

success:接口调用成功时的回调函数；

fail：接口调用失败时的回调函数。

icon 值说明

值	说明	平台差异说明
success	显示成功图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度，`App`仅支持单行显示。	支付宝小程序无长度无限制
error	显示错误图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度，`App`仅支持单行显示。	支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持
fail	显示错误图标，此时 title 文本无长度显示。	支付宝小程序、抖音小程序
exception	显示异常图标。此时 title 文本无长度显示。	支付宝小程序
loading	显示加载图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度。	支付宝小程序不支持
none	不显示图标，此时 title 文本在`小程序`最多可显示两行。

uni.hideToast()

隐藏消息提示框。

示例代码：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<navigator open-type="reLaunch"  url="/pages/user/user">个人中心</navigator>
		<button @click="show">显示</button>
		<button @click="hide">隐藏</button>
		<view v-for="item in 100">{{item}}</view>
	</view>
</template>

<script setup>
	function show(){
		uni.showToast({
			title:"操作成功成功成功",
			icon:'none',
			//image:"../../static/images/xxmLogo.png",
			mask:true,
			duration:3000
		})
	}
	
	function hide(){
		uni.hideToast()
	}
}