您好,登錄后才能下訂單哦!
怎么在微信小程序中使用component自定義彈窗?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
Step1:初始化組件
新建一個(gè)components文件夾,這個(gè)文件夾用來(lái)存放我們以后要開(kāi)發(fā)的所有自定義組件。
然后在components文件夾中創(chuàng)建Toast文件夾,在Toast上右擊新建Component 之后就會(huì)自動(dòng)創(chuàng)建相對(duì)應(yīng)的wxml、wxss、js、json文件。
Step2:組件的相關(guān)配置
將toast.json 中component 設(shè)置為true
toast.json:
{ "component": true, // 自定義組件聲明 "usingComponents": {} // 可選項(xiàng),用于引用別的組件 }
然后在toast.wxml文件里寫(xiě)彈窗組件的模板,在toast.wxss文件里寫(xiě)組件的樣式
toast.wxml:
<!--components/Toast/toast.wxml--> <view class='mask' hidden="{{isShow}}"> <image class="image" src='../../images/{{icon}}.png' mode='aspectFit'></image> <view class='info'>{{information}}</view> </view>
toast.wxss:
/* components/Toast/toast.wxss */ .mask{ width: 400rpx; height: 300rpx; border-radius:10rpx; position: fixed; z-index: 1000; top: 300rpx; left: 175rpx; background: rgba(0, 0, 0, 0.6); } .image{ z-index: 1000; width: 120rpx; height: 120rpx; margin-left: 140rpx; } .info{ margin-top:50rpx; z-index: 1000; text-align: center; color: #ffffff; } width: 400rpx; height: 300rpx; border-radius:10rpx; position: fixed; z-index: 1000; top: 300rpx; left: 175rpx; background: rgba(0, 0, 0, 0.6); } .image{ z-index: 1000; width: 120rpx; height: 120rpx; margin-left:80rpx; } .info{ margin-top:50rpx; z-index: 1000; text-align: center; color: #ffffff; }
Step3:定義屬性、數(shù)據(jù)和事件
可以看到在toast.wxml文件中出現(xiàn)了{(lán){isShow}}、{{icon}}、{{information}} 變量,這是為了組件模板能夠根據(jù)傳入的屬性動(dòng)態(tài)變化。
toast.js :
// components/Toast/toast.js Component({ /** * 組件的屬性列表 */ properties: { //定義組件屬性 information:{ //用來(lái)顯示提示信息 type: String, // 類(lèi)型(必填),目前接受的類(lèi)型包括:String, Number, Boolean, Object, Array, null(表示任意類(lèi)型) value: '提示信息' // 屬性初始值(可選),如果未指定則會(huì)根據(jù)類(lèi)型選擇一個(gè) }, icon:{ //圖標(biāo)類(lèi)型,我在images文件夾中存放了success和fail的兩個(gè)圖標(biāo) type:String, value:'success' }, showTime:{ //彈窗開(kāi)始顯示的時(shí)間單位ms type: Number, value:1000 }, hideTime: { //彈窗開(kāi)始隱藏的時(shí)間單位ms type: Number, value: 1000 } }, /** * 組件的初始數(shù)據(jù) */ data: { isShow:true }, /** * 組件的方法列表 */ methods:{ showToast:function () { let that = this; setTimeout(function () { that.setData({ isShow: !that.data.isShow }); }, that.data.showTime); }, hideToast: function (e) { let that = this; setTimeout(function(){ that.setData({ isShow: !that.data.isShow }); },that.data.hideTime); } } })
Step4:使用彈窗/strong>
目前已經(jīng)完成了toast組件模板,接下來(lái)就是在需要顯示這個(gè)彈窗的頁(yè)面中使用它。
index.json:引入組件
{ "usingComponents": { "toast": "/components/Toast/toast" } }
index.wxml:
<!--page/index/index.wxml--> <view class="container"> <toast id='toast'information="提交成功,我們會(huì)盡快和您聯(lián)系" icon="success" showTime="1000" hideTime='2000'></toast> <button type="primary" bindtap="show"> 顯示彈窗 </button> </view>
index.js:
// page/index/index.js Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { }, show:function(){ this.toast.showToast(); this.toast.hideToast(); }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { this.toast = this.selectComponent("#toast"); }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶(hù)點(diǎn)擊右上角分享 */ onShareAppMessage: function () { } })
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。