微信小程序開發(fā)之wx.showToast怎么用

這篇文章主要介紹了微信小程序開發(fā)之wx.showToast怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

wx.showToast API是顯示消息提示框的作用。

先讓我們看一下官方的文檔說明：

注意：其中的圖標(biāo)，只支持”success”、”loading”

示例代碼：

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

接下來演示如何使用，先打開微信web開發(fā)者工具，新建快速項(xiàng)目，刪除掉首頁(yè)沒用的內(nèi)容，保留如下部分。

添加兩個(gè)按鈕，同事添加點(diǎn)擊事件。再在按鈕上添加navigator導(dǎo)航，鏈接到默認(rèn)的日志頁(yè)面。代碼如下：

 <navigator url="../logs/logs">
 <button type="primary" bindtap="logbtn"> 登陸 </button>
 </navigator>
 <view class="br">

 </view>
 <navigator url="../logs/logs">
 <button type="primary" bindtap="morebtn"> 查看更多 </button>
 </navigator>

index.js代碼如下：

 logbtn: function () {
 wx.showToast({
 title: '登陸成功',
 icon: 'success',
 duration: 1200
 })
 },
 morebtn: function () {
 wx.showToast({
 title: '加載中',
 icon: 'loading',
 duration: 1200
 })
 },

為了測(cè)試效果直觀一些，我們?cè)趦蓚€(gè)按鈕中插入一塊view標(biāo)簽，讓兩個(gè)按鈕上下之間有間距。wxml代碼如下：

 <view class="br">

 </view>

wxss文件代碼如下：

.br{
 width: 100%;
 height: 200rpx;
}

最終的頁(yè)面樣式如下：

點(diǎn)擊登陸的效果圖：

點(diǎn)擊查看更多的效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序開發(fā)之wx.showToast怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!