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

swan.showToast

解釋：顯示消息提示框，用以提供成功、警告和錯(cuò)誤等反饋信息。設(shè)計(jì)文檔詳見(jiàn) 消息提示框。

方法參數(shù)

Object object

object參數(shù)說(shuō)明

icon 有效值

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例 1 - 默認(rèn)樣式

<view class="card-area">
    <view class="top-description border-bottom">默認(rèn)樣式</view>
    <button bindtap="showToast" type="primary" hover-stop-propagation="true">默認(rèn)toast</button>   
</view>

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

設(shè)計(jì)指南

默認(rèn)消息提示框自帶“Success”圖標(biāo)，建議在正向提示場(chǎng)景應(yīng)用，如“XX 成功”，“XX 完成”，并對(duì)反饋內(nèi)容精簡(jiǎn)表達(dá)。

代碼示例 2 - 無(wú)圖標(biāo) toast

<view class="card-area">
    <view class="top-description border-bottom">
        <view>設(shè)置不顯示圖標(biāo)</view>
        <view>icon: 'none'</view>
    </view>
    <button bindtap="showToastIcon" type="primary" hover-stop-propagation="true">無(wú)圖標(biāo)toast</button>
</view>

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

設(shè)計(jì)指南

無(wú)圖標(biāo)的消息提示框最多可顯示雙行 28 個(gè)字，需 措辭 精簡(jiǎn)，并根據(jù)反饋內(nèi)容設(shè)置合理的折行位置。

代碼示例 3 - 顯示 loading 圖標(biāo)

<view class="card-area">
    <view class="top-description border-bottom">
        <view>設(shè)置顯示loading圖標(biāo)</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>設(shè)置延遲時(shí)間</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 同時(shí)只能顯示一個(gè)。
• Tip：swan.showToast 應(yīng)與 swan.hideToast 配對(duì)使用。

參考示例

參考示例 1 - 開(kāi)發(fā)者可自定義 showToast 樣式 

在開(kāi)發(fā)者工具中打開(kāi)

<view class="wrap">
    <button type="primary" bindtap="clickbtn"> 點(diǎn)擊 </button>
    <view animation="{{animationData}}" class="toast-view" s-if="{{showModalStatus}}">
        要顯示的內(nèi)容
    </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 是否可共存 

在開(kāi)發(fā)者工具中打開(kāi)

<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">點(diǎn)擊彈出toast</button>   
        <button bindtap="showModal" type="primary">點(diǎn)擊彈出modal</button>   
    </view>
</view>

Page({
    showToast() {
        swan.showToast({
            title: 'title', 
            icon: 'none',
            mask: false, // 此屬性設(shè)置為false
            success: res => {
                console.log('showToast success', res);
            },
            fail: err => {
                console.log('showToast fail', err);
            }
        })
    },
    showModal() {
       swan.showModal({
           title: 'title',
           content: 'content'
       });
    }
});

錯(cuò)誤碼

Android

iOS