demo地址：
https://github.com/939624959/Components-time-picker-.git
目录
效果图：
组件 time-picker
time-picker.json
{
"component": true,
"usingComponents": {
"van-popup": "@vant/weapp/popup/index",
"van-icon": "@vant/weapp/icon/index",
"van-tree-select": "@vant/weapp/tree-select/index",
"van-button": "@vant/weapp/button/index"
}
}time-picker.js
const getDateStr = AddDayCount => {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth()+1;//获取当前月份的日期
var d = dd.getDate();
return y+"-"+m+"-"+d;
}
Component({
properties: {
title: String, // 标题
isShow: Boolean, // 控制显示隐藏
dayNum: Number, // 左侧导航栏数量
timeArr: Array // 右侧时间段数组
},
data: {
mainActiveIndex: 0,
activeId: null,
itemTree:[]
},
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
this.getTimeLists()
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
methods: {
// 关闭页面 触发父级设置为隐藏
onClose(){
this.triggerEvent('closeEvent',{})
},
// 选择大类
onClickNav({ detail = {} }) {
this.setData({
mainActiveIndex: detail.index || 0,
});
},
// 选择小类
onClickItem({ detail = {} }) {
const activeId = this.data.activeId === detail.id ? null : detail.id;
this.setData({ activeId });
},
// 确定按钮
timePicked(){
let { activeId } = this.data
if(!!activeId){
let dayIndex = Math.floor(activeId / 10)
let timeIndex = activeId - dayIndex * 10
console.log(dayIndex, timeIndex)
let day = this.data.itemTree[dayIndex-1].text
console.log(day)
let time = this.data.itemTree[dayIndex].children[timeIndex].text
console.log(time)
let value = day + ' ' + time
console.log(value)
this.triggerEvent('onSelected', {value})
}
this.triggerEvent('closeEvent',{})
},
// 获取时间树数据
getTimeLists(){
let itemTree = []
for(let i = 1; i <= this.properties.dayNum; i++){
let day = getDateStr(i)
let children = []
for(let j = 0; j <= this.properties.timeArr.length; j++){
children.push({
text: this.properties.timeArr[j],
id: i * 10 + j
})
}
itemTree.push({
text: day,
children
})
}
this.setData({itemTree})
},
}
})time-picker.wxml
<van-popup
show="{
{ isShow }}"
round
position="bottom"
bind:close="onClose"
>
<!-- 标题 -->
<view class="title">
<view>{
{title}}</view>
<view bindtap="onClose" style="width: 50rpx;height: 50rpx;text-align: center;"><van-icon name="cross" /></view>
</view>
<!-- 选择器 -->
<van-tree-select
items="{
{ itemTree }}"
main-active-index="{
{ mainActiveIndex }}"
active-id="{
{ activeId }}"
main-active-class="green"
content-active-class="green"
bind:click-nav="onClickNav"
bind:click-item="onClickItem"
/>
<!-- 确定按钮 -->
<view class="footerBtn">
<van-button type="primary" block round bind:click="timePicked">确定</van-button>
</view>
</van-popup>time-picker.wxss
.title{
font-size: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 40rpx;
}
.green{
color: #04c255;
border-color: #04c255!important;
}
.footerBtn{
padding: 20rpx;
border-top: 1rpx solid #f7f8fa;
}页面
page.json
{
"navigationBarTitleText": "时间选择器",
"usingComponents": {
"time-picker": "/components/time-picker/time-picker",
"van-cell": "@vant/weapp/cell/index"
}
}page.js
Page({
data: {
showTimePicker: true, // 是否显示时间选择器
expTime: '请选择期望时间', // 页面显示选中时间值
dayNum: 5, // 日期数量
timeArr: ['09:00-15:00', '15:00-21:00'] // 时间段数组
},
// 打开时间选择器
toPickTime(){
this.setData({showTimePicker: true})
},
// 关闭时间选择器
closeTimePicker(){
this.setData({showTimePicker: false})
},
// 跟新选中时间值
updateExpTime(e){
let expTime = e.detail.value
this.setData({expTime})
},
})page.wxml
<view>
<view class="label">期望上门时间：</view>
<van-cell title="{
{expTime}}" is-link bind:click="toPickTime"/>
<!-- 时间选择器 -->
<time-picker
isShow="{
{showTimePicker}}"
title="选择上门时间"
dayNum="{
{dayNum}}"
timeArr="{
{timeArr}}"
bindcloseEvent="closeTimePicker"
bindonSelected="updateExpTime"
/>
</view>page.wxss
.label{
padding: 20rpx;
font-size: 28rpx;
}