1.目标写一个在项目中用的对话框。把各个知识点整合起来。
先看最后的效果图
图一
屏幕快照 2018-03-10 下午7.26.04.png
2.创建一个对话框
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: {
// 弹窗标题
title: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个
},
// 弹窗内容
content: {
type: String,
value: '我就试试'
},
// 弹窗取消按钮文字
cancelText: {
type: String,
value: '取消'
},
// 弹窗确认按钮文字
confirmText: {
type: String,
value: '确定'
}
},
/**
* 组件的初始数据
*/
data: {
// 弹窗显示控制
hideTitle: false,
isHide: true
},
/**
* 组件的方法列表
*/
methods: {
/*
* 公有方法
*/
//隐藏弹框
hideDialog() {
this.setData({
isHide: !this.data.isHide
})
},
//展示弹框
showDialog() {
this.setData({
isHide: !this.data.isHide
})
},
//隐藏标题
hideTitle(flag) {
this.setData({
hideTitle: flag
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() {
//触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//触发成功回调
this.triggerEvent("confirmEvent");
}
}
})
在小程序的默认文件里面就有:组件的初始数据data、组件的属性列表properties、组件的方法列表methods。就好像一个类，一开始有初始数据，属性、方法。
3.在其他组件中使用这个对话框
3.1 配置文件里面声明
{
"usingComponents": {
"dialog": "/pages/customComponent/customComponent"
}
}
3.2 在wxml文件中使用
<!--index.wxml-->
<dialog id='dialog'
title='我是标题'
content='我是内容，我就想试试'
cancelText='不试了'
confirmText='试一试'
bind:cancelEvent="_cancelEvent"
bind:confirmEvent="_confirmEvent"
></dialog>
<view catchtap='showDialog' >显示有标题的对话框</view>
<view catchtap='showDialogNoTitle'>显示没有标题的对话框</view>
3.3 在js文件中进行逻辑操作
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
onReady: function () {
//获得dialog组件
this.dialog = this.selectComponent("#dialog");
},
//事件处理函数
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();
}
})
最后的运行结果就是步骤二中呈现的了。
4.编写的思路总结
4.1 编写组件
这个可以分为：编写组件的界面、编写组件的逻辑。
4.2 使用组件
注意：首先要在配置文件中声明药使用的的组件；
然后在wxml文件引入要使用的组件。
最后在逻辑代码中进行控制。
5.参考地址
http://blog.csdn.net/rolan1993/article/details/78801052/
http://www.ifanr.com/minapp/966941
