微信小程序開發(fā)之toast提示插件使用示例
更新時間：2017年06月08日 09:58:06 作者：itakeo
這篇文章主要給大家介紹了微信小程序開發(fā)之toast提示插件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
前言
3月28號微信更新了版本，showToast可以通過image參數(shù)修改默認(rèn)icon了，最大時間也取消了。
以上兩個更新實用很多，但icon還是無法去除。顯示形式有點單一，無法自定義，可能后續(xù)更新會增加更多功能。下面來看看本文的詳細(xì)內(nèi)容：
下載文章下面的文件，放在根目錄。
然后在app.js中引入js并添加到App中，如下：
var wxToast = require('toast/toast.js')
App({
wxToast ,
onLaunch: function () {}
})
在app.wxss中添加如下css：
.wxToast_mask{width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:10000;background:rgba(0,0,0,0);opacity:0;display:none}.wxToast_show{display:block}.wxToast_content{max-width:80%;min-width:90px;position:absolute;left:50%;top:20%;transform:translate3d(-50%,0,0);padding:15px;color:#fff;font-size:17px;text-align:center;border-radius:5px;background:rgba(0,0,0,.8)}.wxToast_img{width:55px;height:55px;display:block;margin:0 auto 8px auto}
接著在頁面xxx.wxml中添加如下內(nèi)容：
<import src="../../toast/toast.wxml"/>
<template is="wxToast" data="{{...wxToastConfig}}"></template>
最后在頁面xxx.js中就可以調(diào)用了。
var app = getApp(); //wxToast掛載在app下面，所以必須先獲取app
Page({
toast: {
//調(diào)用
app.wxToast({
title : '加載中'
})
},
onLoad : function( ){}
})
更多方法：
app.wxToast({
title : '驗證碼錯誤', //標(biāo)題，不寫默認(rèn)正在加載
img : '../../images/cc.png', //icon路徑，不寫不顯示
imgClass : 'images', //icon添加class類名
contentClass : 'content', //內(nèi)容添加class類名
duration : 3000, //延時關(guān)閉，默認(rèn)2000
tapClose : false, //點擊關(guān)閉，默認(rèn)false
show : function(){ //顯示函數(shù)
console.log('顯示啦')
},
hide : function(){ //關(guān)閉函數(shù)
console.log('消失啦')
}
});
app.wxToast(false); //如果需要隱藏，參數(shù)設(shè)置為false即可。
setTimeout(function(){
app.wxToast(false);
},3000)
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
為網(wǎng)站代碼塊pre標(biāo)簽增加一個復(fù)制代碼按鈕代碼
寫文章的時候，作為一名專業(yè)的碼農(nóng)，經(jīng)常會在文章中粘貼一些代碼。有的時候代碼塊比較長，在后期使用中需要復(fù)制這段代碼就比較麻煩2021-11-11
如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果
JS是由ES(ECMAScript)、DOM(瀏覽器文檔對象)、BOM(瀏覽器對象模型)組成,這篇文章主要給大家介紹了關(guān)于如何使用ES6的class類繼承來實現(xiàn)絢麗小球效果的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了JS圖片預(yù)加載插件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果【測試可用】
這篇文章主要介紹了JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果,可實現(xiàn)基本的菜單折疊與展開功能,涉及javascript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06
js實現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動顯示的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)目錄鏈接,內(nèi)容跟著目錄滾動顯示的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)
該價格表基于Bootstrap網(wǎng)格系統(tǒng)來進(jìn)行布局，通過簡單的CSS3代碼來美化價格表，樣式非常的時尚漂亮，且能在不同屏幕下展示良好的效果,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JavaScript之ES5的繼承的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
最近因項目需要用ACCESS做數(shù)據(jù)庫開發(fā)WEB項目看論壇上還許多人問及ACCESS被注入的安全問題 許多人解決的方法仍然是用Replace替換特殊字符，然而這樣做也并沒有起到太大做用2008-06-06
微信小程序開發(fā)中的大部分知識點和前端開發(fā)是一模一樣的,這篇文章主要給大家介紹了關(guān)于微信小程序傳值常用的4種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
詳解JavaScript的數(shù)據(jù)類型以及數(shù)據(jù)類型的轉(zhuǎn)換
這篇文章主要介紹了JavaScript的數(shù)據(jù)類型以及數(shù)據(jù)類型的轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04