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