百度智能小程序 显示消息提示框

swan.showToast

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

方法参数

Object object

object参数说明

icon 有效值

示例 

在开发者工具中打开

代码示例 1 - 默认样式

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

Page({
    showToast() {
        swan.showToast({
            title: '默认toast',
            mask: false,
            success: res => {
                this.setData({'disabled': false});
            },
            fail: err => {
                console.log('showToast fail', err);
            }
        });
    }
});

设计指南

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

代码示例 2 - 无图标 toast

<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>

Page({
    showToastIcon() {
        swan.showToast({
            title: '单行最多十四个文字单行最多十四个文字',
            icon: 'none',
            mask: false,
            success: res => {
                this.setData({'disabled': false});
            },
            fail: err => {
                console.log('showToast fail', err);
            }
        });
    }
});

设计指南

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

代码示例 3 - 显示 loading 图标

<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>

Page({
    showToastLoading() {
        swan.showToast({
            title: '正在加载...',
            icon: 'loading',
            mask: false,
            success: res => {
                this.setData({'disabled': false});
            },
            fail: err => {
                console.log('showToast fail', err);
            }
        });
    }
});

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

<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>

Page({
    showToastDuration() {
        swan.showToast({
            duration: 5000,
            title: '5000毫秒后隐藏',
            icon: 'none',
            mask: false,
            success: res => {
                this.setData({'disabled': false});
            },
            fail: err => {
                console.log('showToast fail', err);
            }
        });
    }
});

代码示例 5 - 隐藏 toast

<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>

Page({
    hideToast() {
        swan.hideToast();
    }
});

Bug & Tip

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

参考示例

参考示例 1 - 开发者可自定义 showToast 样式 

在开发者工具中打开

<view class="wrap">
    <button type="primary" bindtap="clickbtn"> 点击 </button>
    <view animation="{{animationData}}" class="toast-view" s-if="{{showModalStatus}}">
        要显示的内容
    </view>
</view>

Page({
    data: {
        animationData: "",
        showModalStatus: false
    },
    showModal() {
        let animation = swan.createAnimation({ 
            duration: 200,  
            timingFunction: 'linear',
            delay: 0  
        });
        animation.translateY(200).step();
        this.setData({
            animationData: animation.export(),
            showModalStatus: true
        })
        setTimeout(()=> { 
            animation.translateY(0).step()  
            this.setData({
                animationData: animation.export()  
            })  
        }, 200)  
        setTimeout(()=> {
            if(this.data.showModalStatus){ 
                this.hideModal();
            }  
        }, 3000)  
    },  
    clickbtn() {  
        if(this.data.showModalStatus){  
            this.hideModal();  
        }
        else {  
            this.showModal();  
        }  
    },  
    hideModal() {  
        this.setData({
            showModalStatus: false
        })
    }
})

参考示例 2 - showModal 和 showToast 是否可共存 

在开发者工具中打开

<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>

Page({
    showToast() {
        swan.showToast({
            title: 'title', 
            icon: 'none',
            mask: false, // 此属性设置为false
            success: res => {
                console.log('showToast success', res);
            },
            fail: err => {
                console.log('showToast fail', err);
            }
        })
    },
    showModal() {
       swan.showModal({
           title: 'title',
           content: 'content'
       });
    }
});

错误码

Android

iOS