首页 > 编程知识 正文

微信小程序picker多选,picker组件

时间:2023-05-04 13:16:29 阅读:225879 作者:1275

代码仓库: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; },})

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。