1.目標(biāo)寫一個在項(xiàng)目中用的對話框廷臼。把各個知識點(diǎn)整合起來稀余。
先看最后的效果圖
圖一
屏幕快照 2018-03-10 下午7.26.04.png
2.創(chuàng)建一個對話框
2.1 編寫對話框的界面
2.1.1 對話框的wxml代碼：
<!--pages/customComponent/customComponent.wxml-->
<view class='mask' hidden='{{isHide}}'>
<view class='dialog'>
<view class='title' hidden='{{hideTitle}}'>{{title}}</view>
<view class='content'>{{content}}</view>
<view class='btn'>
<view class='cancel' catchtap='_cancelEvent'>{{cancelText}}</view>
<view class='confirm' catchtap='_confirmEvent'>{{confirmText}}</view>
</view>
</view>
</view>
2.1.2 對話框的wcss代碼：
/* pages/customComponent/customComponent.wxss */
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.dialog {
position: fixed;
display: inline-block;
width: 80%;
max-width: 600rpx;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
text-align: center;
border-radius: 3px;
border: 1px solid #d5d5d6;
overflow: hidden;
}
.title {
font-size: 18px;
padding: 15px 15px 5px;
}
.content {
padding: 15px 15px 5px;
min-height: 40px;
font-size: 16px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999;
border-bottom: 1px solid #d5d5d6;
}
.cancel, .confirm {
display: inline-block;
width: 50%;
box-sizing: border-box;
font-size: 17px;
padding: 10px 0;
}
.cancel {
color: #353535;
}
.confirm {
color: #3cc51f;
border-left: 1px solid #d5d5d6;
}
2.1.3 編寫對話框的邏輯
// pages/customComponent/customComponent.js
Component({
/**
* 組件的屬性列表
*/
properties: {
// 彈窗標(biāo)題
title: { // 屬性名
type: String, // 類型（必填）粥血，目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: '標(biāo)題' // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
},
// 彈窗內(nèi)容
content: {
type: String,
value: '我就試試'
},
// 彈窗取消按鈕文字
cancelText: {
type: String,
value: '取消'
},
// 彈窗確認(rèn)按鈕文字
confirmText: {
type: String,
value: '確定'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
// 彈窗顯示控制
hideTitle: false,
isHide: true
},
/**
* 組件的方法列表
*/
methods: {
/*
* 公有方法
*/
//隱藏彈框
hideDialog() {
this.setData({
isHide: !this.data.isHide
})
},
//展示彈框
showDialog() {
this.setData({
isHide: !this.data.isHide
})
},
//隱藏標(biāo)題
hideTitle(flag) {
this.setData({
hideTitle: flag
})
},
/*
* 內(nèi)部私有方法建議以下劃線開頭
* triggerEvent 用于觸發(fā)事件
*/
_cancelEvent() {
//觸發(fā)取消回調(diào)
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//觸發(fā)成功回調(diào)
this.triggerEvent("confirmEvent");
}
}
})
在小程序的默認(rèn)文件里面就有:組件的初始數(shù)據(jù)data亲铡、組件的屬性列表properties萝衩、組件的方法列表methods。就好像一個類趾疚，一開始有初始數(shù)據(jù)缨历，屬性、方法糙麦。
3.在其他組件中使用這個對話框
3.1 配置文件里面聲明
{
"usingComponents": {
"dialog": "/pages/customComponent/customComponent"
}
}
3.2 在wxml文件中使用
<!--index.wxml-->
<dialog id='dialog'
title='我是標(biāo)題'
content='我是內(nèi)容辛孵，我就想試試'
cancelText='不試了'
confirmText='試一試'
bind:cancelEvent="_cancelEvent"
bind:confirmEvent="_confirmEvent"
></dialog>
<view catchtap='showDialog' >顯示有標(biāo)題的對話框</view>
<view catchtap='showDialogNoTitle'>顯示沒有標(biāo)題的對話框</view>
3.3 在js文件中進(jìn)行邏輯操作
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
},
onReady: function () {
//獲得dialog組件
this.dialog = this.selectComponent("#dialog");
},
//事件處理函數(shù)
showDialog: function() {
console.log('showDialog');
this.dialog.hideTitle(false);
this.dialog.showDialog();
},
showDialogNoTitle: function () {
this.dialog.hideTitle(true);
this.dialog.showDialog();
},
_cancelEvent: function () {
this.dialog.hideDialog();
},
_confirmEvent() {
// 在此處寫確定的邏輯代碼
console.log('_confirmEvent');
this.dialog.hideDialog();
}
})
最后的運(yùn)行結(jié)果就是步驟二中呈現(xiàn)的了。
4.編寫的思路總結(jié)
4.1 編寫組件
這個可以分為：編寫組件的界面赡磅、編寫組件的邏輯魄缚。
4.2 使用組件
注意：首先要在配置文件中聲明藥使用的的組件；
然后在wxml文件引入要使用的組件仆邓。
最后在邏輯代碼中進(jìn)行控制鲜滩。
5.參考地址
http://blog.csdn.net/rolan1993/article/details/78801052/
http://www.ifanr.com/minapp/966941
