第微信小程序自定義Dialog彈框本文實例為大家分享了微信小程序自定義Dialog彈框的具體代碼，供大家參考，具體內(nèi)容如下

一、創(chuàng)建組件

1、在根目錄下自定義一個components文件夾，用來存放自定義的組件。

2、再針對每一個組件創(chuàng)建一個文件夾，用來存放這個組件相關(guān)的文件。

3、在指定組件的文件夾中右鍵-新建Component創(chuàng)建組件。這樣創(chuàng)建的目的是在json文件中添加component:true，將其聲明為一個組件。

下面開始例子：

1、組件頁面index.wxml

!--確認(rèn)框--

!--遮罩層--

viewstyle="width:{{windowWidth}}px;height:{{windowHeight}}px;display:{{show'block':'none'}};"/view

viewstyle="width:{{windowWidth}}px;height:{{windowHeight}}px;display:{{show'flex':'none'}};"

view

view

view

text{{message}}/text

/view

view

viewbindtouchend="onCancel"

text{{cancelButtonText}}/text

/view

viewbindtouchend="onConfirm"

text{{confirmButtonText}}/text

/view

/view

/view

/view

/view

2、組件樣式index.wxss

/*components/dialog/index.wxss*/

.dialog-overlay-view{

background-color:#000000;

opacity:0.5;

position:fixed;

z-index:10;

.col-center{

position:fixed;

z-index:11;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

.dialog-content-view{

width:210px;

background:#FFFFFF;

border-radius:8px;

display:flex;

flex-direction:column;

justify-content:center;

padding:40px40px20px40px;

.dialog-content-text{

font-size:14px;

font-family:PingFangSC-Regular,PingFangSC;

font-weight:400;

color:#454545;

line-height:20px;

.operation-view{

display:flex;

flex-direction:row;

justify-content:space-between;

margin-top:30px;

.operation-col-view{

height:36px;

width:75px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

.cancel-text{

height:14px;

font-size:14px;

font-family:PingFangSC-Regular,PingFangSC;

font-weight:400;

color:#999999;

line-height:14px;

.confirm-text{

height:14px;

font-size:14px;

font-family:PingFangSC-Regular,PingFangSC;

font-weight:400;

color:#E63719;

line-height:14px;

}

3、組件json配置index.json

{

"component":true,

"usingComponents":{}

}

4、組件頁面的jsindex.js

//components/dialog/index.js

Component({

options:{

/**

styleIsolation選項從基礎(chǔ)庫版本2.6.5開始支持。它支持以下取值：

isolated表示啟用樣式隔離，在自定義組件內(nèi)外，使用class指定的樣式將不會相互影響（一般情況下的默認(rèn)值）；

apply-shared表示頁面wxss樣式將影響到自定義組件，但自定義組件wxss中指定的樣式不會影響頁面；

shared表示頁面wxss樣式將影響到自定義組件，自定義組件wxss中指定的樣式也會影響頁面和其他設(shè)置了apply-shared或shared的自定義組件。（這個選項在插件中不可用。）

*/

styleIsolation:'isolated'

},

/**

*組件的屬性列表

*/

properties:{

cancelButtonText:{

type:String,

value:'取消'

},

confirmButtonText:{

type:String,

value:'確定'

},

message:{

type:String,

value:''

},

show:{

type:Boolean,

value:false,

},

confirmCallback:null,

cancelCallback:null,

},

/**

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

*/

data:{

windowWidth:0,

windowHeight:0,

},

/**

*生命周期函數(shù)

*/

ready:function(){

var_this=this;

wx.getSystemInfo({

success:function(res){

_this.setData({

windowWidth:res.windowWidth,

windowHeight:res.windowHeight,

});

}

});

},

/**

*組件的方法列表

*/

methods:{

onConfirm(){

if(perties.confirmCallback){

perties.confirmCallback();

}

this.setData({show:false});

},

onCancel(){

if(perties.cancelCallback){

perties.cancelCallback();

}

this.setData({show:false});

},

}

});

5、組件jsdialog.js

constdefaultOptions={

show:false,

message:'',

selector:'#cus-dialog',

confirmButtonText:'確認(rèn)',

cancelButtonText:'取消',

confirmCallback:null,

cancelCallback:null,

letcurrentOptions=Object.assign({},defaultOptions);

functiongetContext(){

constpages=getCurrentPages();

returnpages[pages.length-1];

constDialog=(options)={

options=Object.assign(Object.assign({},currentOptions),options);

constcontext=options.context||getContext();

constdialog=context.selectComponent(options.selector);

deleteoptions.context;

deleteoptions.selector;

if(dialog){

dialog.setData(options);

wx.nextTick(()={

dialog.setData({show:true});

});

}

else{

console.warn('未找到cus-dialog節(jié)點，請確認(rèn)selector及context是否正確');

}

Dialog.confirm=(options)=Dialog(Object.assign({showCancelButton:true},options));

exportdefaultDialog;

6、使用方法

需要用到dialog的頁面引入dialog組件：

{

"usingComponents":{

"cus-dialog":"../../components/dialog/index"

}

}

頁面加入dialog節(jié)點：

cus-dialogid="cus-dialog"/