詳解微信小程序開發(fā)之——wx.showToast(OBJECT)的使用
更新時(shí)間：2017年01月18日 14:56:49 作者：SundayAaron
本篇文章主要介紹了微信小程序開發(fā)之——wx.showToast(OBJECT)的使用，具有一定的參考價(jià)值，有興趣的可以了解一下。
wx.showToast API是顯示消息提示框的作用。
先讓我們看一下官方的文檔說明：
注意：其中的圖標(biāo)，只支持”success”、”loading”
示例代碼：
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
接下來演示如何使用，先打開微信web開發(fā)者工具，新建快速項(xiàng)目，刪除掉首頁沒用的內(nèi)容，保留如下部分。
添加兩個(gè)按鈕，同事添加點(diǎn)擊事件。再在按鈕上添加navigator導(dǎo)航，鏈接到默認(rèn)的日志頁面。代碼如下：
<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
})
},
為了測試效果直觀一些，我們在兩個(gè)按鈕中插入一塊view標(biāo)簽，讓兩個(gè)按鈕上下之間有間距。wxml代碼如下：
<view class="br"> </view>
wxss文件代碼如下：
.br{
width: 100%;
height: 200rpx;
}
最終的頁面樣式如下：
點(diǎn)擊登陸的效果圖：
點(diǎn)擊查看更多的效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序 教程之注冊程序的相關(guān)資料,需要的朋友可以參考下2016-10-10
JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM三
這篇文章主要為大家介紹了JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM示例詳解第3/3篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了apply&call&bind方法原理及使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
J avaScript無處不在，從PC端到移動(dòng)設(shè)備端，甚至是后端，都在使用JavaSc ript。在本文中，將嘗試一些可用來使代碼看起來更簡潔的實(shí)踐方案，希望能幫助到大家2021-09-09
這篇文章主要介紹了利用javaScript處理常用事件詳解,文章有非常詳細(xì)的代碼實(shí)踐,對學(xué)習(xí)js的小伙伴們有一定的參考價(jià)值,需要的朋友可以參考下2021-04-04
這篇文章主要介紹了微信小程序中setInterval的使用方法的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
如何取得中文輸入的真實(shí)長度？...2006-06-06
這篇文章主要介紹了微信小程序頁面間通信的5種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家介紹了10分鐘內(nèi)講解Npm腳本使用教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
DOM，即文檔對象模型，前端開發(fā)工程師必學(xué)的基礎(chǔ)知識(shí)，在本文將介紹如何在 HTML 文檔中選擇元素、如何創(chuàng)建元素、如何更改內(nèi)聯(lián) CSS 樣式以及如何監(jiān)聽事件,需要的朋友可以參考一下2021-10-10