快捷導(dǎo)航

微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼

更新時(shí)間：2018年11月15日 10:32:04 作者：站住，別跑

微信小程序里面的自帶彈窗icon只有兩種，success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實(shí)現(xiàn)代碼 ,需要的朋友可以參考下

微信小程序里面的自帶彈窗icon只有兩種，success和loading。有時(shí)候用戶輸入錯(cuò)誤的時(shí)候想加入一個(gè)提醒圖標(biāo)，也可以使用wx.showToast中的image來添加圖片達(dá)到使用自定義圖標(biāo)的目的；但是如果圖標(biāo)是字體，或者提醒的內(nèi)容有很長(zhǎng)捏（小程序中提醒的內(nèi)容最多只能設(shè)置7個(gè)字，多了會(huì)被隱藏），那就只有自定義toast彈窗了；

第一步：新建一個(gè)wxml文件用來裝模板，方便以后使用，比如

然后在這里面添加模板代碼

<template name="toast"> //name相當(dāng)于模板的標(biāo)識(shí)，引用的時(shí)候好判斷引用哪一個(gè)
 <view class='toast-out' wx:if='{{isShow}}'>　　　　//wx：if是條件渲染，使用這個(gè)是為了好判斷是否顯示或隱藏toast
 <view class='toast-in'>　　　　　　
 <span class='iconfont {{iconClass}}'></span> //使用的阿里字體圖標(biāo)，根據(jù)傳入的class值改變顯示的圖標(biāo)
 <view class='toast-txt'>
  {{txt}}　　　　　　　　　　//需要顯示的提醒內(nèi)容
 </view>
 </view>
 </view>
</template>

第二步：定義toast的樣式

.toast-out {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 width: 100%;
 height: 100%;
 display: flex; //小程序中多使用flex布局，很方便的
 justify-content: center;　　
 align-items: center;
}
.toast-out .toast-in {
 min-width: 100px;
 background: rgba(0, 0, 0, 0.7);
 padding: 6px;
 text-align: center;
 color: white;
 border-radius: 8px;
}
.toast-out .toast-in span {
 font-size: 30px;
}
.toast-out .toast-in .toast-txt {
 font-size: 14px;
}

第三步：在需要彈窗的頁面import那個(gè)toast模板頁面：

<import src="../../public/html/template.wxml" />

　　　　備注：../是指返回上一層目錄即父目錄，兩個(gè)../即返回到父目錄的父目錄。/是根目錄，絕對(duì)路徑。這里也可以使用絕對(duì)路徑

　　　　然后再在這個(gè)頁面任何地方引用模板

<template is="toast" data="{{txt,isShow,iconClass}}"></template>

第四步：在引入彈窗頁面的js中

　　　　在page的data里先定義 isShow:false //默認(rèn)隱藏的但是我有點(diǎn)奇怪的是，不定義這個(gè)屬性，注釋掉，都能正常的隱藏與顯示。

　　　然后定義一個(gè)顯示彈窗的函數(shù)

toastShow:function(str,icon){
 var _this = this;
 _this.setData({
 isShow: true,
 txt: str,
 iconClass:icon
 });
 setTimeout(function () { //toast消失
 _this.setData({
 isShow: false
 });
 }, 1500); 
}

　　　　然后在需要toast彈窗顯示的事件里調(diào)用該事件就行了，比如：

log_btn:function(){
 var name=this.data.userName;if(name==""){
 this.toastShow('登錄名不能為空',"icon-suo");
 }
}

結(jié)果：

圖標(biāo)隨意弄的。。。

或者是在把彈窗的js寫入App（{}）里面，然后需要用的頁面就直接getApp().toastShow()就行了。例如：

App({
 toastShow: function (that, str, icon){
 that.setData({
 isShow: true,
 txt: str,
 iconClass: icon
 });
 setTimeout(function () {
 that.setData({
 isShow: false
 });
 }, 1500);
 }, 
})

然后在需要引入彈窗的頁面：

var app = getApp();

在該頁面需要調(diào)用的函數(shù)中：

his_clear:function(){ 
 app.toastShow(this, "清除成功", "icon-correct"); 
},

連接：小程序使用阿里字體圖標(biāo)

總結(jié)：和HTML不一樣，小程序中wx:if條件渲染就可以實(shí)現(xiàn)隱藏與顯示的wx:if="false"就是隱藏，true就是顯示。

　　　使用display:flex彈性盒子布局很方便，就比如上面彈窗的水平與垂直居中，只要設(shè)置兩個(gè)屬性就可以了。不用再像以前一樣還需要設(shè)置其它的一堆，以前水平垂直居中的方法

補(bǔ)充：

　　justify-content 的可選屬性有：flex-start（全靠左），flex-end（全靠右），center（居中），space-between，space-around，initial（從父元素繼承該屬性）

　　可查看效果：http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start

　　align-items 的可選屬性有：stretch，center，flex-start，flex-end，baseline（處于同一條基線），initial（設(shè)置為默認(rèn)值），inherit（從父元素繼承該屬性）

　　可查看效果：http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=baseline

總結(jié)

以上所述是小編給大家介紹的微信小程序之自定義toast彈窗，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具