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

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()

隐藏消息提示框。

示例代码:

html 复制代码
<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()
	}
}
相关推荐
希望奇迹很安静19 分钟前
SSRF_XXE_RCE_反序列化学习
学习·web安全·ctf·渗透测试学习
悦悦子a啊37 分钟前
Python之--字典
开发语言·python·学习
kmjyccc1 小时前
生活毫无头绪就毫无头绪吧(7.24)
学习·生活
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
耶啵奶膘2 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
heyilunv2 小时前
昇思学习营-Deepseek-r1-distill-qwen-1.5b模型开发与适配课程内容和学习心得
学习
蒙塔基的钢蛋儿2 小时前
将nuttx构建脚本的文件夹复制修改为符号链接
笔记
胡耀超2 小时前
我们如何写好提示词、发挥LLM能力、写作指南:从认知分析到动态构建的思维方法
人工智能·python·学习·大模型·llm·提示词·八要素思维
waveee1232 小时前
学习嵌入式的第三十一天-数据结构-(2025.7.23)网络协议封装
学习
冷崖4 小时前
Redis缓存策略以及bigkey的学习(九)
redis·学习·缓存