快捷導(dǎo)航

微信小程序開(kāi)發(fā)之toast提示插件使用示例

更新時(shí)間：2017年06月08日 09:58:06 作者：itakeo

這篇文章主要給大家介紹了微信小程序開(kāi)發(fā)之toast提示插件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。

前言

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)

點(diǎn)擊這里下載文件

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

ES6字符串的擴(kuò)展實(shí)例
這篇文章主要介紹了ES6字符串的擴(kuò)展實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
數(shù)組方法解決JS字符串連接性能問(wèn)題有爭(zhēng)議
大多數(shù)情況下，加法運(yùn)算符是首選；如果用戶(hù)主要使用IE6或7，并且字符串大小較大或數(shù)量較多時(shí)，那么數(shù)組技術(shù)就很值得。
2011-01-01
簡(jiǎn)單漂亮的js彈窗可自由拖拽且兼容大部分瀏覽器
js彈窗想必大家都有見(jiàn)到過(guò)吧，如何要說(shuō)可以自由拖拽，并兼容大部分瀏覽器的就沒(méi)有幾個(gè)了吧，本文的這個(gè)示例或許是大家要找的，可以參考下
2013-10-10
javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能,實(shí)現(xiàn)方法真的超簡(jiǎn)單，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2021-09-09
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加、移除元素的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素動(dòng)態(tài)添加、移除、設(shè)置等相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下
2019-01-01

JS監(jiān)聽(tīng)一個(gè)變量改變的兩種方法

在業(yè)務(wù)中,由于項(xiàng)目采用微前端架構(gòu),需要通過(guò)A應(yīng)用的某個(gè)值的變化對(duì)B應(yīng)用中的DOM進(jìn)行改變（如彈出一個(gè)Modal）,第一個(gè)想到的可能是發(fā)布訂閱模式,其實(shí)不如將問(wèn)題縮小化,采用原生的能力去解決,本文介紹了兩種方法來(lái)使用JS監(jiān)聽(tīng)一個(gè)變量改變,需要的朋友可以參考下

2023-11-11