swan.showToast

解释：显示消息提示框

方法参数

Object object

object参数说明

icon有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 - 默认样式

  1. <view class="card-area">    <view class="top-description border-bottom">默认样式</view>    <button bindtap="showToast" type="primary" hover-stop-propagation="true">默认toast</button>   </view>
  1. Page({    showToast() {        swan.showToast({            title: '默认toast',            mask: false,            success: res => {                this.setData({'disabled': false});            },            fail: err => {                console.log('showToast fail', err);            }        });    }});

代码示例2 - 无图标toast

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

代码示例3 - 显示loading图标

  1. <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>
  1. Page({    showToastLoading() {        swan.showToast({            mask: true,            title: '正在加载...',            icon: 'loading',            mask: false,            success: res => {                this.setData({'disabled': false});            },            fail: err => {                console.log('showToast fail', err);            }        });    }});

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

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

  1. <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>
  1. Page({    hideToast() {        swan.hideToast();        swan.hideLoading();    }});

参考示例

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

在开发者工具中预览效果

  1. <view class="wrap">    <button type="primary" bindtap="clickbtn"> 点击 </button>    <view animation="{{animationData}}" class="toast-view" s-if="{{showModalStatus}}">要显示的内容    </view></view>
  1. Page({    data: {        animationData: "",        showModalStatus: false    },    showModal() {        var animation = swan.createAnimation({             duration: 200,              timingFunction: "linear",              delay: 0          })          animation.translateY(200).step()        this.setData({            animationData: animation.export(),            showModalStatus: true        })        let that = this;        setTimeout(function () {             animation.translateY(0).step()              that.setData({                animationData: animation.export()              })          }, 200)          setTimeout(function () {            if(that.data.showModalStatus){                 that.hideModal();            }          }, 5000)      },      clickbtn() {          if(this.data.showModalStatus){              this.hideModal();          }        else {              this.showModal();          }      },      hideModal() {          this.setData({            showModalStatus: false        })    },  })

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

在开发者工具中预览效果

  1. <view class="container">    <view>        <view class="card-area">             <view class="top-description border-bottom">showModal和showToast可共存</view>            <button data-title="success" data-icon="success" bindtap="showToast" type="primary" hover-stop-propagation="true">点击弹出toast</button>               <button data-title="loading" data-icon="loading" bindtap="showModal" type="primary" hover-stop-propagation="true">点击弹出modal</button>           </view>    </view></view>
  1. Page({    data: { },    showToast(e) {        this.toast(e.currentTarget.dataset.title, e.currentTarget.dataset.icon);    },    toast(title, icon) {        swan.showToast({            title,             icon,            mask: false, // 此属性设置为true不能打断toast            success: res => {                console.log('showToast success', res);            },            fail: err => {                console.log('showToast fail', err);            }        })    },    showModal(){       swan.showModal({           title: 'title',           content: 'content'       });    }});

错误码

Android

iOS

Bug&Tip

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