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