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()
	}
}
相关推荐
菌菇汤7 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
板栗焖小鸡41 分钟前
STM32-PWM驱动无源蜂鸣器
stm32·学习
X_StarX42 分钟前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Code季风1 小时前
Gin 中间件详解与实践
学习·中间件·golang·go·gin
智者知已应修善业3 小时前
【51单片机用数码管显示流水灯的种类是按钮控制数码管加一和流水灯】2022-6-14
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
孞㐑¥6 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
sealaugh329 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
水木兰亭9 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
鱼摆摆拜拜9 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习