uni.showToast(options) @showtoast

展示全部

# uni.showToast(options)

显示消息提示框 GitCode GitHub

Android 11 及以上版本，应用进入后台后，调用系统toast (设置了position的情况) 不弹出。文档地址

# showToast 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowToastOptions

是

uni.showToast参数定义

名称

类型

必备

默认值

兼容性

描述

title

string

是

提示的内容，长度与 icon 取值有关。

icon

string

否

"success"

icon值说明

合法值

兼容性

描述

success

显示成功图标

error

显示错误图标

fail

显示错误图标，此时title文本无长度显示

exception

显示异常图标，此时title文本无长度显示

显示加载图标

none

不显示图标

image

string.ImageURIString

否

自定义图标的本地路径（app端暂不支持gif）

mask

boolean

否

false

是否显示透明蒙层，防止触摸穿透

duration

number

否

1500

提示的延迟时间，单位毫秒

position

string

否

position值说明。纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。

合法值

兼容性

描述

top

居上显示

center

居中显示

bottom

居底显示

success

(res: ShowToastSuccess) => void

否

uni.showToast成功回调函数定义

fail

(res: IPromptError) => void

否

uni.showToast失败回调函数定义

complete

(res: any) => void

否

uni.showToast完成回调函数定义

# IPromptError 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值

兼容性

描述

撤销

1001

请求参数非法

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view direction="vertical" style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap">
      <view class="uni-padding-wrap">
        <text class="uni-title-text uni-common-mb">设置icon</text>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChangeIcon">
          <radio class="uni-list-cell uni-list-cell-pd radio-icon" v-for="(icon, index) in icon_enum" :key="icon.value"
            :class="index < icon_enum.length - 1 ? 'uni-list-cell-line' : ''" :value="icon.value"
            :checked="index === icon_current">{{icon.name}}</radio>
        </radio-group>
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <view class="uni-list-cell-db">是否显示自定义图标</view>
        <switch :checked="imageSelect" @change="change_image_boolean" />
      </view>
      <view class="uni-list-cell uni-list-cell-padding">
        <view class="uni-list-cell-db">是否显示透明蒙层-屏蔽点击事件</view>
        <switch :checked="maskSelect" @change="change_mask_boolean" />
      </view>
      <view class="uni-title uni-list-cell-padding">提示的延迟时间，默认：1500（单位毫秒）</view>
      <view class="uni-list-cell-padding">
        <slider @change="sliderChange" foreColor="#007AFF" :value="intervalSelect" :min="1500" :max="5000"
          :show-value="true" />
      </view>
      <view class="uni-btn-v">
        <button class="uni-btn-v" type="default" @tap="toast1Tap" id="btn-toast-default">点击弹出toast</button>
        <button class="uni-btn-v" type="default" @tap="hideToast" id="btn-toast-hide">点击隐藏toast</button>
      </view>
      <!-- #ifdef APP -->
      <view class="uni-padding-wrap uni-common-mt">
        <text class="uni-title-text uni-common-mb"> 设置position，仅App生效 </text>
      </view>
      <view class="uni-list uni-common-pl">
        <radio-group @change="radioChangePosition">
          <radio class="uni-list-cell uni-list-cell-pd radio-position" v-for="(position, index) in position_enum"
            :key="position.value" :class="index < position_enum.length - 1 ? 'uni-list-cell-line' : ''"
            :value="position.value" :checked="index === position_current">{{position.name}}</radio>
        </radio-group>
      </view>
      <button class="uni-btn uni-btn-v uni-common-mb" type="default" @tap="toast2Tap">点击弹出设置position的toast</button>
      <!-- #endif -->
      <text>{{exeRet}}</text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>