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