微信小程式元件：toast顯示訊息提示框解讀與分析

toast顯示訊息提提示框元件說明:

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

toast顯示訊息提示方塊元件的範例程式碼運作效果如下：    

#下面是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)
  },

以下是WXSS程式碼：

/**index.下面是WXSS代码：**/
.con-button{
  display: flex;
  flex-direction: row;
  padding-top: 10%;
}
.showfunc{
  padding-top:10%;
  display: block;
  text-align: center;
  color: green;
}

以上是微信小程式元件：toast顯示訊息提示框解讀與分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！