第微信小程序?qū)崿F(xiàn)自定義彈窗組件的示例代碼目錄編寫組件代碼Dialog.wxmlDialog.jsDialog.wxss調(diào)用自定義組件上一篇中說的是小程序自帶的彈窗組件，今天，我們來試試小程序的自定義組件，我們自定義一個帶確定取消的彈窗組件。

首先，放一下，最終的效果圖：

這是我們最后要實現(xiàn)的效果

那么，首先，我們創(chuàng)建一個組件

新建component文件夾存放我們的組件，里邊存放的就是我們所用的組件，我們今天要做的事彈出框，新建文件夾popup存放我們的組件模板，點擊右鍵選擇新建component，就會自動生成組件的模板wxss、wxml、json、js，如圖

剩下的，就是不廢話了，上代碼：

編寫組件代碼

Dialog.wxml

viewhidden="{{flag}}"

view

view{{title}}/view

view{{content}}/view

view

textbindtap='_error'{{btn_no}}/text

textbindtap='_success'{{btn_ok}}/text

/view

/view

/view

Dialog.js

Component({

options:{

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

*組件的屬性列表

properties:{

title:{//屬性名

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

value:'標(biāo)題'//屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個

//彈窗內(nèi)容

content:{

type:String,

value:'內(nèi)容'

//彈窗取消按鈕文字

btn_no:{

type:String,

value:'取消'

//彈窗確認(rèn)按鈕文字

btn_ok:{

type:String,

value:'確定'

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

data:{

flag:true,

*組件的方法列表

methods:{

//隱藏彈框

hidePopup:function(){

this.setData({

flag:!this.data.flag

//展示彈框

showPopup(){

this.setData({

flag:!this.data.flag

*內(nèi)部私有方法建議以下劃線開頭

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

_error(){

//觸發(fā)取消回調(diào)

this.triggerEvent("error")

_success(){

//觸發(fā)成功回調(diào)

this.triggerEvent("success");

Dialog.wxss

/*component/popup.wxss*/

.wx-popup{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

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

.popup-container{

position:absolute;

left:50%;

top:50%;

width:80%;

max-width:600rpx;

border:2rpxsolid#ccc;

border-radius:10rpx;

box-sizing:bordre-box;

transform:translate(-50%,-50%);

overflow:hidden;

background:#fff;

.wx-popup-title{

width:100%;

padding:20rpx;

text-align:center;

font-size:40rpx;

border-bottom:2rpxsolidred;

.wx-popup-con{

margin:60rpx10rpx;

text-align:center;

.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;

組件的代碼，到這里就是完成了。

調(diào)用自定義組件

1：我們要在留言板中使用這個自定義組件,打開board.json，在usingComponents中增加如下代碼

"popup":"/component/popup/popup";

2：在board.wxml中引入組件

!—自定義組件--

view

view

buttonbindtap="showPopup"點我/button

/view

popupid='popup'

title='小組件'

content='學(xué)會了嗎'

btn_no='沒有'

btn_ok='學(xué)會了'

bind:error="_error"

bind:success="_success"

/popup

/view

3：在board.js中調(diào)用組件

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

constapp=getApp()

Page({

onReady:function(){

//獲得popup組件

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

showPopup(){

this.popup.showPopup();

//取消事件

_error(){

console.log('你點擊了取消');

this.popup.hidePopup();

//確認(rèn)事件