微信小程序里面的自帶彈窗icon只有兩種,success和loading。有時(shí)候用戶(hù)輸入錯(cuò)誤的時(shí)候想加入一個(gè)提醒圖標(biāo),也可以使用wx.showToast中的image來(lái)添加圖片達(dá)到使用自定義圖標(biāo)的目的;但是如果圖標(biāo)是字體,或者提醒的內(nèi)容有很長(zhǎng)捏(小程序中提醒的內(nèi)容最多只能設(shè)置7個(gè)字,多了會(huì)被隱藏),那就只有自定義toast彈窗了;
創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、城北網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性?xún)r(jià)比高,為城北等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
第一步:新建一個(gè)wxml文件用來(lái)裝模板,方便以后使用,比如
然后在這里面添加模板代碼
<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; }
第三步:在需要彈窗的頁(yè)面import那個(gè)toast模板頁(yè)面:
<import src="../../public/html/template.wxml" />
備注:../是指返回上一層目錄即父目錄,兩個(gè)../即返回到父目錄的父目錄。/是根目錄,絕對(duì)路徑。這里也可以使用絕對(duì)路徑
然后再在這個(gè)頁(yè)面任何地方引用模板
<template is="toast" data="{{txt,isShow,iconClass}}"></template>
第四步:在引入彈窗頁(yè)面的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寫(xiě)入App({})里面,然后需要用的頁(yè)面就直接getApp().toastShow()就行了。例如:
App({ toastShow: function (that, str, icon){ that.setData({ isShow: true, txt: str, iconClass: icon }); setTimeout(function () { that.setData({ isShow: false }); }, 1500); }, })
然后在需要引入彈窗的頁(yè)面:
var app = getApp();
在該頁(yè)面需要調(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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)站欄目:微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
路徑分享:http://bm7419.com/article48/jdsjep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、微信小程序、做網(wǎng)站、ChatGPT、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)