代码仓库:https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/hoursPicker
效果:
wxml:
<view class="pickerMai">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}} </view></picker>js:
Page({ data: { multiArray: [['今天', '明天', '后天'], []], multiIndex: [0, 0], normalHours: [], todayHours: [], }, onShow() { this.initHour(); }, initHour() { var hour = new Date().getHours(); var todayHours = this.testConcat(hour); //根据当前小时生成数组 var normalHours = this.testConcat(); //生成默认小时数组 var multiArray = this.data.multiArray; multiArray[1] = todayHours; //初始化今天的小时数组 this.setData({ todayHours: todayHours, normalHours: normalHours, multiArray: multiArray, }) }, bindMultiPickerChange: function (e) { console.log('picker发送选择改变,携带值为multiIndex=', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { var column = e.detail.column; var value = e.detail.value; console.log('修改的列为', column, ',值为', value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[column] = value; switch (column) { case 0: //第一列的变化 switch (value) { case 0: data.multiArray[1] = this.data.todayHours; //切换到今天时间数组 break; case 1: data.multiArray[1] = this.data.normalHours; break; case 2: data.multiArray[1] = this.data.normalHours; break; } break; case 1: console.log('multiIndex', data.multiIndex); break; } this.setData(data); }, //生成06:00-8:00小时数组 testConcat(start = 6) { var arrayHours = []; for (let i = start; i < 21; i++) { if (i < 10) { var hourStr = `0${i}:00-${i + 2}:00`; } else { var hourStr = `${i}:00-${i + 2}:00`; } arrayHours.push(hourStr); } // console.warn('arrayHours', arrayHours); return arrayHours; },})