微信小程序開發(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)文章

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

JS監(jiān)聽一個變量改變的兩種方法

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

2023-11-11