詳解微信小程序開發(fā)之——wx.showToast(OBJECT)的使用
更新時(shí)間：2017年01月18日 14:56:49 作者：SundayAaron
本篇文章主要介紹了微信小程序開發(fā)之——wx.showToast(OBJECT)的使用，具有一定的參考價(jià)值，有興趣的可以了解一下。
wx.showToast API是顯示消息提示框的作用。
先讓我們看一下官方的文檔說(shuō)明：
注意：其中的圖標(biāo)，只支持”success”、”loading”
示例代碼：
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
接下來(lái)演示如何使用，先打開微信web開發(fā)者工具，新建快速項(xiàng)目，刪除掉首頁(yè)沒(méi)用的內(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)擊查看更多的效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
高級(jí)前端必會(huì)的package.json字段知識(shí)詳解
這篇文章主要為大家介紹了高級(jí)前端必會(huì)的package.json字段知識(shí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序canvas寫字板效果及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-06-06
以JS開發(fā)為例詳解版本號(hào)的作用與價(jià)值
這篇文章主要為大家介紹了以JS開發(fā)為例詳解版本號(hào)的作用與價(jià)值詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Astro Islands靜態(tài)頁(yè)面交互式UI組件
這篇文章主要為大家介紹了Astro Islands靜態(tài)頁(yè)面交互式UI組件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
深入內(nèi)存原理談JS中變量存儲(chǔ)在堆中還是棧中
JavaScript中基本類型存儲(chǔ)在堆中還是棧中，百度一下有很多不同的答案，本篇文章就來(lái)給大家為此做個(gè)詳細(xì)的介紹,需要的朋友可以參考一下2021-09-09
微信小程序 支付功能實(shí)現(xiàn)PHP實(shí)例詳解
這篇文章主要介紹了微信小程序 支付功能實(shí)現(xiàn)PHP實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 條件渲染詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹關(guān)于前端JavaScript的Promise，Promise 是異步編程的一種解決方案，下面文章我們就來(lái)看看Promise的基本用法及各種方法,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-10-10
本地存儲(chǔ)localStorage設(shè)置過(guò)期時(shí)間示例詳解
這篇文章主要為大家介紹了本地存儲(chǔ)localStorage設(shè)置過(guò)期時(shí)間示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM一
這篇文章主要為大家介紹了JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM示例詳解第1/3篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06