因业务需求,为便于重用,封装了一个选择器,只需传入数组和初始值(可不传),方便调用:
1、生成对应的相关文件:
2、在json文件中,添加component:
demoPicker.json
{
"component": true,
"usingComponents": {}
}
dempPicker.js:
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
// title: { // 属性名
// type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
// value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个
// },
initValue: { // 初始化日期
type: String,
value: ''
},
items: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
flag: true, //是否显示
setValues: [],
},
/**
* 组件的方法列表
*/
methods: {
//隐藏弹框
hiddeDatePicker: function () {
this.setData({
flag: !this.data.flag
})
},
//展示弹框
showDatePicker() {
this.setData({
flag: !this.data.flag
})
this._getItems()
},
// 点击确定
_confirm() {
let item = this.data.items[this.data.setValues[0]]
this.triggerEvent('confirm', item)
},
// 滑动 methods
_bindChange(e) {
console.log(e.detail.value)
},
// 获取初始化信息
_getItems(e) {
if (this.data.items.length && this.data.initValue) {
let items = this.data.items
for (let i = 0; i < items.length; i++) {
if (this.data.initValue == items[i].id) {
this.setData({
setValues: [i]
})
return
}
}
}
this.setData({
setValues: [0]
})
},
},
})
demoPicker.wxml:
取消
确定
{{item.text}}
demoPicker.wxss:
.date-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.date-gray-background {
position: absolute;
width: 100%;
top: 0;
background: rgba(0, 0, 0, .5);
height: calc(100% - 500rpx);
}
.date-container {
position: absolute;
width: 100%;
height: 500rpx;
/* border: 2rpx solid #ccc;
border-radius: 10rpx; */
/* box-sizing: bordre-box; */
overflow: hidden;
background: #fff;
bottom:0;
}
.date-confirm {
display: flex;
justify-content: space-between;
align-items: center;
padding:0 20rpx;
font-size:28rpx;
line-height: 70rpx;
color:#60c48e;
}
以上封装类的操作就完成了,下面是如何引用,下面以addCalendar文件为例:
addCalendar.json:
{
"usingComponents": {
"demopicker": "/component/demoPicker/demoPicker"
}
}
addCalendar.wxml:
addCalendar.js:
在页面渲染出来后操作(当然也可以在onLoad中)
onReady: function () {
this.demopicker = this.selectComponent("#demopicker");
},
显示或者隐藏控件:
// 显示 选择控件
showEventTypePicker() {
this.demopicker.showDatePicker()
},
// 隐藏 选择控件
hiddeEventTypePicker() {
this.demopicker.hiddeDatePicker();
},
点击确定时输出信息:
// demopicker 输出数据
_confirmeventtype(e) {
//console.log("_confirmeventtype:", e, e.detail)
// 操作完成后记得收起控件哦
this.hiddeEventTypePicker()
},
此处需要说明的是,为了便于扩展,传入的数据源需要是[{id: '', text:''}]的格式哦,当然如有需要可以根据自己项目需求更改; bind:confirm="_confirmeventtype"此处是为了将控件中的方法和引用文件中的方法绑定,实现互通。在控件中有this.triggerEvent('confirm', item)这行代码,此处的confirm即上面的confirm,item为传递给confirmeventtype的信息数据。