第微信小程序彈窗組件使用詳解最近在開發(fā)小程序應(yīng)用,發(fā)現(xiàn)小程序當中有關(guān)于組件的介紹非常的少,當前自己做的項目當中,有出現(xiàn)過這種情況,所以自己就封裝了一個小程序的彈窗組件,現(xiàn)在把自己的心得分享給大家,大家一起來學(xué)習(xí)吧

效果圖

項目需求是需要在頁面上通過點擊按鈕,然后彈出彈窗蒙層;因為小小程序當中經(jīng)常會用到彈窗,因此這里我直接將彈窗封裝成了一個組件,下次使用的時候,直接調(diào)用就可以了。

1、在微信小程序當中,在當前項目當中,新建一個component文件夾,這個文件夾專門用來存放我們要使用的組件,然后在component文件夾下右擊,新建文件夾popup,這里就是我們要用的彈窗組件的文件夾,再右擊popup文件夾,選擇新建component,然后直接輸入popup即可,小程序內(nèi)部會為我們自動生成.wxss,wxml,json,js等模板文件,如下圖所示,popup文件夾下的文件為我們的組件,index文件夾下的文件為首頁上頁面：

2、popup彈窗組件的代碼部分;

popup.wxml

viewhidden="{{flag}}"

view

view{{title}}/view

!--view{{content}}/view--

view

text{{content_leftText}}/text

text{{content_money}}/text

text{{content_rightText}}/text

/view

view

view

viewbindtap='_close'

viewX/view

/view

/view

/view

/view

/view

popup.wxss

.wx-popup{

position:fixed;

left:0;

bottom:0;

top:0;

z-index:2000;

width:100%;

height:100%;

background:rgba(0,0,0,.6);

.popup-container{

position:fixed;

left:10%;

top:20%;

width:80%;

max-width:600rpx;

border-radius:20rpx;

box-sizing:bordre-box;

background:#fff;

z-index:2000;

.wx-popup-title{

width:100%;

padding:28rpx;

text-align:center;

font-size:36rpx;

font-weight:bold;

border-bottom:5rpxsolid#9EA3BA;

box-sizing:border-box;

.wx-popup-con{

margin:50rpx10rpx;

text-align:center;

padding:086rpx;

.wx-popup-context{

padding-bottom:10rpx;

.content_money{

color:#FFB258;

.wx-popup-btn{

display:flex;

justify-content:space-around;

margin-bottom:40rpx;

.wx-popup-btntext{

display:flex;

align-items:center;

justify-content:center;

width:30%;

height:88rpx;

border:2rpxsolid#ccc;

border-radius:88rpx;

.wx-popup-btn.closeBtn{

position:fixed;

left:45%;

bottom:30%;

.wx-popup-btn.close-popup{

position:relative;

height:80rpx;

width:80rpx;

border:5rpxsolid#fff;

border-radius:50%;

.wx-popup-btn.close-popupview{

position:absolute;

left:30%;

top:8%;

font-size:50rpx;

color:#fff;

}

popup.js

Component({

options:{

multipleSlots:true//在組件定義時的選項中啟用多slot支持

/**

*組件的屬性列表

*/

properties:{

title:{

//屬性名

type:String,

//類型（必填），目前接受的類型包括：String,Number,Boolean,Object,Array,null（表示任意類型）

value:'標題'

//屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個

},

//彈窗內(nèi)容

content_leftText:{

type:String,

value:'內(nèi)容'

},

content_money:{

type:String,

value:'內(nèi)容'

},

content_rightText:{

type:String,

value:'內(nèi)容'

},

/**

*組件的初始數(shù)據(jù)

*/

data:{

flag:true,

/**

*組件的方法列表

*/

methods:{

//隱藏彈框

hidePopup:function(){

this.setData({

flag:!this.data.flag

})

},

//展示彈框

showPopup(){

this.setData({

flag:!this.data.flag

})

},

/*

*triggerEvent用于觸發(fā)事件

*/

_close(){

this.triggerEvent("close");

}

})

3、完成模板文件的工作后,接下來就是在首頁當中對這個組件進行配置,在index文件夾當中對index.json文件進行配置,代碼如下：

4、在首頁當中進行使用,代碼如下：

view

view

buttontype="primary"bindtap="showPopup"點擊預(yù)測價錢/button

/view

popupid='popup'

title='預(yù)測價格'

content_leftText='您好,預(yù)測價格為'

content_money='{{content_money}}'

content_rightText='元,預(yù)測價格和實際價格存在偏差,請耐心等候?qū)I(yè)顧問為您服務(wù)。'

bind:close="_close"

/popup

/view

5、index.wxss的樣式

.index_popup.btn-areabutton{

background-image:linear-gradient(toright,rgba(36,162,255),rgba(36,172,255),rgba(36,192,255));

font-size:34rpx;

font-weight:normal;

border-radius:50rpx;

padding:18rpx30rpx;

margin-top:100rpx;

}

6、index.js文件里,配置對應(yīng)的點擊事件,還有操作數(shù)據(jù)

//index.js

//獲取應(yīng)用實例

constapp=getApp()

Page({

data:{

content_money:'1000萬'

onReady:function(){

//獲得popup組件

this.popup=this.selectComponent("#popup");

showPopup(){

this.popup.sh