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

发布于:2025-06-09 ⋅ 阅读:(19) ⋅ 点赞:(0)

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


网站公告

今日签到

点亮在社区的每一天
去签到