本文編輯：  DevelopeWhite瀏覽 6220 4 版權所有，嚴禁轉載

組件說明:

Toast是當用戶點擊某些組件時彈出來來的提示消息。Toast會幫助你創建和顯示這些消息。Toast是一種簡易的消息提示框。當視圖顯示給用戶，在應用程序中顯示為浮動。小程序即將廢棄Toast組件，故這里介紹Toast的API：wx.showToast

組件用法：

wxml

<!--index.wxml-->
<view class="content">
  <text class="showfunc">Toast功能</text>
  <view class="con-button">
    <button class="button-left" bindtap="showToast">展示Toast</button>
    <button class="button-right" bindtap="hideToast">隱藏Toast</button>
  </view>
</view>

js

Page({
  showToast:function(){
    var that=this;
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000,
      success: that.flySuccess,
      fail:that.flyFail,
      complete:that.flyComplete
    })
  },

  hideToast:function(){
    var that=this;
    wx.showToast({
      title: '加載中',
      icon: 'loading',
      duration: 10000,
      success: that.loadingSuccess,
      fail:that.loadingFail,
      complete:that.loadingComplete
    });

    setTimeout(function(){
      wx.hideToast()
    },2000)
  },

  flySuccess:function(e){
    console.log(e);
    console.log("起飛成功！");
  },
  flyFail:function(e){
    console.log(e);
    console.log("起飛失敗！")
  },
  flyComplete:function(e){
    console.log(e);
    console.log("起飛結束！")
  },
  loadingSuccess:function(e){
    console.log(e);
    console.log("加載成功！");
  },
  loadingFail:function(e){
    console.log(e);
    console.log("加載失敗！")
  },
  loadingComplete:function(e){
    console.log(e);
    console.log("加載結束！")
  }
})

wxss

/**index.wxss**/
.con-button{
  display: flex;
  flex-direction: row;
  padding-top: 10%;
}

.showfunc{
  padding-top:10%;
  display: block;
  text-align: center;
  color: green;
}

主要參數：