本文編輯: DevelopeWhite瀏覽 6101
版權(quán)所有,嚴禁轉(zhuǎn)載
Toast是當用戶點擊某些組件時彈出來來的提示消息。Toast會幫助你創(chuàng)建和顯示這些消息。Toast是一種簡易的消息提示框。當視圖顯示給用戶,在應(yīng)用程序中顯示為浮動。小程序即將廢棄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("起飛結(jié)束!")
},
loadingSuccess:function(e){
console.log(e);
console.log("加載成功!");
},
loadingFail:function(e){
console.log(e);
console.log("加載失敗!")
},
loadingComplete:function(e){
console.log(e);
console.log("加載結(jié)束!")
}
})
wxss
/**index.wxss**/
.con-button{
display: flex;
flex-direction: row;
padding-top: 10%;
}
.showfunc{
padding-top:10%;
display: block;
text-align: center;
color: green;
}
參數(shù) | 類型 | 是否必填 | 參數(shù)描述 |
---|---|---|---|
title | String | 是 | 該提示框提示的內(nèi)容 |
icon | String | 否 | 該提示框的圖標,只支持”success”、”loading” |
duration | Number | 否 | 提示的延遲時間,單位毫秒,默認:1500, 最大為10000 |
success | Function | 否 | 該接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |