picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

普通选择器：mode = selector

属性名类型默认值说明最低版本
rangeArray / Object Array[]mode为 selector 或 multiSelector 时，range 有效
range-keyString当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueNumber0value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchangeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
disabledBooleanfalse是否禁用
bindcancelEventHandle取消选择或点遮罩层收起 picker 时触发

多列选择器：mode = multiSelector（

属性名类型默认值说明最低版本
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 开始）
bindchangeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchangeEventHandle某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
bindcancelEventHandle取消选择时触发
disabledBooleanfalse是否禁用

时间选择器：mode = time

属性名类型默认值说明最低版本
valueString表示选中的时间，格式为"hh:mm"
startString表示有效时间范围的开始，字符串格式为"hh:mm"
endString表示有效时间范围的结束，字符串格式为"hh:mm"
bindchangeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
bindcancelEventHandle取消选择时触发
disabledBooleanfalse是否禁用

日期选择器：mode = date

属性名类型默认值说明最低版本
valueString0表示选中的日期，格式为"YYYY-MM-DD"
startString表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
endString表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fieldsStringday有效值 year,month,day，表示选择器的粒度
bindchangeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
bindcancelEventHandle取消选择时触发
disabledBooleanfalse是否禁用

fields 有效值：

值说明
year选择器粒度为年
month选择器粒度为月份
day选择器粒度为天

省市区选择器：mode = region

属性名类型默认值说明最低版本
valueArray[]表示选中的省市区，默认选中每一列的第一个值
custom-itemString可为每一列的顶部添加一个自定义的项
bindchangeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码
bindcancelEventHandle取消选择时触发
disabledBooleanfalse是否禁用

示例代码：

  1. <view class="section">
  2.   <view class="section__title">普通选择器</view>
  3.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  4.     <view class="picker">
  5.       当前选择：{{array[index]}}
  6.     </view>
  7.   </picker>
  8. </view>
  9. <view class="section">
  10.   <view class="section__title">多列选择器</view>
  11.   <picker
  12.     mode="multiSelector"
  13.     bindchange="bindMultiPickerChange"
  14.     bindcolumnchange="bindMultiPickerColumnChange"
  15.     value="{{multiIndex}}"
  16.     range="{{multiArray}}"
  17.   >
  18.     <view class="picker">
  19.       当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  20.     </view>
  21.   </picker>
  22. </view>
  23. <view class="section">
  24.   <view class="section__title">时间选择器</view>
  25.   <picker
  26.     mode="time"
  27.     value="{{time}}"
  28.     start="09:01"
  29.     end="21:01"
  30.     bindchange="bindTimeChange"
  31.   >
  32.     <view class="picker">
  33.       当前选择: {{time}}
  34.     </view>
  35.   </picker>
  36. </view>
  38. <view class="section">
  39.   <view class="section__title">日期选择器</view>
  40.   <picker
  41.     mode="date"
  42.     value="{{date}}"
  43.     start="2015-09-01"
  44.     end="2017-09-01"
  45.     bindchange="bindDateChange"
  46.   >
  47.     <view class="picker">
  48.       当前选择: {{date}}
  49.     </view>
  50.   </picker>
  51. </view>
  52. <view class="section">
  53.   <view class="section__title">省市区选择器</view>
  54.   <picker
  55.     mode="region"
  56.     bindchange="bindRegionChange"
  57.     value="{{region}}"
  58.     custom-item="{{customItem}}"
  59.   >
  60.     <view class="picker">
  61.       当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
  62.     </view>
  63.   </picker>
  64. </view>
  1. Page({
  2.   data: {
  3.     array: ['美国', '中国', '巴西', '日本'],
  4.     objectArray: [
  5.       {
  6.         id: 0,
  7.         name: '美国'
  8.       },
  9.       {
  10.         id: 1,
  11.         name: '中国'
  12.       },
  13.       {
  14.         id: 2,
  15.         name: '巴西'
  16.       },
  17.       {
  18.         id: 3,
  19.         name: '日本'
  20.       }
  21.     ],
  22.     index: 0,
  23.     multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
  24.     objectMultiArray: [
  25.       [
  26.         {
  27.           id: 0,
  28.           name: '无脊柱动物'
  29.         },
  30.         {
  31.           id: 1,
  32.           name: '脊柱动物'
  33.         }
  34.       ], [
  35.         {
  36.           id: 0,
  37.           name: '扁性动物'
  38.         },
  39.         {
  40.           id: 1,
  41.           name: '线形动物'
  42.         },
  43.         {
  44.           id: 2,
  45.           name: '环节动物'
  46.         },
  47.         {
  48.           id: 3,
  49.           name: '软体动物'
  50.         },
  51.         {
  52.           id: 3,
  53.           name: '节肢动物'
  54.         }
  55.       ], [
  56.         {
  57.           id: 0,
  58.           name: '猪肉绦虫'
  59.         },
  60.         {
  61.           id: 1,
  62.           name: '吸血虫'
  63.         }
  64.       ]
  65.     ],
  66.     multiIndex: [0, 0, 0],
  67.     date: '2016-09-01',
  68.     time: '12:01',
  69.     region: ['广东省', '广州市', '海珠区'],
  70.     customItem: '全部'
  71.   },
  72.   bindPickerChange(e) {
  73.     console.log('picker发送选择改变，携带值为', e.detail.value)
  74.     this.setData({
  75.       index: e.detail.value
  76.     })
  77.   },
  78.   bindMultiPickerChange(e) {
  79.     console.log('picker发送选择改变，携带值为', e.detail.value)
  80.     this.setData({
  81.       multiIndex: e.detail.value
  82.     })
  83.   },
  84.   bindMultiPickerColumnChange(e) {
  85.     console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
  86.     const data = {
  87.       multiArray: this.data.multiArray,
  88.       multiIndex: this.data.multiIndex
  89.     }
  90.     data.multiIndex[e.detail.column] = e.detail.value
  91.     switch (e.detail.column) {
  92.       case 0:
  93.         switch (data.multiIndex[0]) {
  94.           case 0:
  95.             data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']
  96.             data.multiArray[2] = ['猪肉绦虫', '吸血虫']
  97.             break
  98.           case 1:
  99.             data.multiArray[1] = ['鱼', '两栖动物', '爬行动物']
  100.             data.multiArray[2] = ['鲫鱼', '带鱼']
  101.             break
  102.         }
  103.         data.multiIndex[1] = 0
  104.         data.multiIndex[2] = 0
  105.         break
  106.       case 1:
  107.         switch (data.multiIndex[0]) {
  108.           case 0:
  109.             switch (data.multiIndex[1]) {
  110.               case 0:
  111.                 data.multiArray[2] = ['猪肉绦虫', '吸血虫']
  112.                 break
  113.               case 1:
  114.                 data.multiArray[2] = ['蛔虫']
  115.                 break
  116.               case 2:
  117.                 data.multiArray[2] = ['蚂蚁', '蚂蟥']
  118.                 break
  119.               case 3:
  120.                 data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓']
  121.                 break
  122.               case 4:
  123.                 data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物']
  124.                 break
  125.             }
  126.             break
  127.           case 1:
  128.             switch (data.multiIndex[1]) {
  129.               case 0:
  130.                 data.multiArray[2] = ['鲫鱼', '带鱼']
  131.                 break
  132.               case 1:
  133.                 data.multiArray[2] = ['青蛙', '娃娃鱼']
  134.                 break
  135.               case 2:
  136.                 data.multiArray[2] = ['蜥蜴', '龟', '壁虎']
  137.                 break
  138.             }
  139.             break
  140.         }
  141.         data.multiIndex[2] = 0
  142.         break
  143.     }
  144.     console.log(data.multiIndex)
  145.     this.setData(data)
  146.   },
  147.   bindDateChange(e) {
  148.     console.log('picker发送选择改变，携带值为', e.detail.value)
  149.     this.setData({
  150.       date: e.detail.value
  151.     })
  152.   },
  153.   bindTimeChange(e) {
  154.     console.log('picker发送选择改变，携带值为', e.detail.value)
  155.     this.setData({
  156.       time: e.detail.value
  157.     })
  158.   },
  159.   bindRegionChange(e) {
  160.     console.log('picker发送选择改变，携带值为', e.detail.value)
  161.     this.setData({
  162.       region: e.detail.value
  163.     })
  164.   }
  165. })

picker