微信小程序表单组件 picker

由 ?﹏???ζ???﹏﹏? 创建，youj 最后一次修改 2016-09-23 picker从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。普通选择器：mode=selector属性名类型默认值说明rangeArray / Object Array[]mode为 selector 或 multiSelector 时，range 有效range-keyString 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valueNumber0value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value}disabledBooleanfalse是否禁用多列选择器：mode = multiSelector（最低版本：1.4.0）属性名类型默认值说明最低版本range二维Array / 二维Object Array[]mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]] range-keyString 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 valueArray[]value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始） bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value} bindcolumnchangeEventHandle 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 disabledBooleanfalse是否禁用 时间选择器：mode=time 属性名类型默认值说明valueString 表示选中的时间，格式为"hh:mm"startString 表示有效时间范围的开始，字符串格式为"hh:mm"endString 表示有效时间范围的结束，字符串格式为"hh:mm"bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value}disabledBooleanfalse是否禁用日期选择器：mode=date属性名类型默认值说明valueString0表示选中的日期，格式为"YYYY-MM-DD"startString 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"endString 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"fieldsStringday有效值 year,month,day，表示选择器的粒度bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value}disabledBooleanfalse是否禁用fields 有效值：值说明year选择器粒度为年month选择器粒度为月份day选择器粒度为天省市区选择器：mode = region（最低版本：1.4.0）属性名类型默认值说明valueArray[]表示选中的省市区，默认选中每一列的第一个值bindchangeEventHandle value 改变时触发 change 事件，event.detail = {value: value}disabledBooleanfalse是否禁用 示例代码：<view class="section"> <view class="section__title">普通选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择: {{array[index]}} </view> </picker></view><view class="section"> <view class="section__title">多列选择器</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" <view class="picker"> 当前选择: {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}} </view> </picker></view><view class="section"> <view class="section__title">时间选择器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker></view><view class="section"> <view class="section__title">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker></view><view class="section"> <view class="section__title">省市区选择器</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}"> <view class="picker"> 当前选择: {{region[0]}},{{region[1]}},{{region[2]}} </view> </picker></view>Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }, { id: 3, name: '日本' } ], index: 0, multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']], objectMultiArray: [ [ { id: 0, name: '无脊柱动物' }, { id: 1, name: '脊柱动物' } ], [ { id: 0, name: '扁性动物' }, { id: 1, name: '线形动物' }, { id: 2, name: '环节动物' }, { id: 3, name: '软体动物' }, { id: 3, name: '节肢动物' } ], [ { id: 0, name: '猪肉绦虫' }, { id: 1, name: '吸血虫' } ] ], multiIndex: [0, 0, 0], date: '2016-09-01', time: '12:01', region: ['广东省', '广州市', '海珠区'] }, bindPickerChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindMultiPickerChange: function (e) { c