swan.showToast

解释：显示消息提示框，用以提供成功、警告和错误等反馈信息。设计文档详见消息提示框。

方法参数

Object object

object 参数说明

icon 有效值

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

• SWAN
• JS

<view class="card-area">
    <view class="top-description border-bottom">默认样式</view>
    <button bindtap="showToast" type="primary" hover-stop-propagation="true">默认toast</button>   
</view>

设计指南

默认消息提示框自带“Success”图标，建议在正向提示场景应用，如“XX 成功”，“XX 完成”，并对反馈内容精简表达。

错误

图标与反馈的内容不符合。

错误

反馈内容过长会显示不全。

代码示例 2：无图标 toast

• SWAN
• JS

<view class="card-area">
    <view class="top-description border-bottom">
        <view>设置不显示图标</view>
        <view>icon: 'none'</view>
    </view>
    <button bindtap="showToastIcon" type="primary" hover-stop-propagation="true">无图标toast</button>
</view>

设计指南

无图标的消息提示框最多可显示双行 28 个字，需措辞精简，并根据反馈内容设置合理的折行位置。

正确

在“同步成功”处设置折行，阅读体验更佳。

错误

行业术语、技术代码均无法交代清楚原因，应转化为用户语言。

错误

表述模糊冗余，且过长文案显示不完整。

代码示例 3：显示 loading 图标

• SWAN
• JS

<view class="card-area">
    <view class="top-description border-bottom">
        <view>设置显示loading图标</view>
        <view>icon: 'loading'</view>
    </view>
    <button bindtap="showToastLoading" type="primary" hover-stop-propagation="true">loading toast</button>
</view>

代码示例 4：延迟 5000 毫秒的 toast

• SWAN
• JS

<view class="card-area">
    <view class="top-description border-bottom">
        <view>设置延迟时间</view>
        <view>duration: 5000</view>
    </view>
    <button bindtap="showToastDuration" type="primary" hover-stop-propagation="true">延迟5000毫秒的toast</button>
</view>

代码示例 5：隐藏 toast

• SWAN
• JS

<view class="card-area">
    <view class="top-description border-bottom">隐藏toast</view>
    <button bindtap="hideToast" type="primary" disabled="{{disabled}}" hover-stop-propagation="true">隐藏toast</button>
</view>

代码示例 6：showModal 和 showToast 是否可共存

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view class="wrap">
    <view class="card-area"> 
        <view class="top-description border-bottom">showModal和showToast可共存</view>
        <button bindtap="showToast" type="primary" hover-stop-propagation="true">点击弹出toast</button>   
        <button bindtap="showModal" type="primary">点击弹出modal</button>   
    </view>
</view>

Bug & Tip

• Tip：swan.showLoading 和 swan.showToast 同时只能显示一个。
• Tip：swan.showToast 应与 swan.hideToast 配对使用。

错误码

Android

iOS