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. <!--picker.jxml-->
  2. <view class="page-section">
  3.     <view class="page-section-title">普通选择器</view>
  4.         <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  5.             <view class="picker">
  6.       当前选择：{{array[index]}}
  7.       </view>
  8.         </picker>
  9. </view>    
  10. <view class="page-section">
  11.     <view class="page-section-title">多列选择器</view>
  12.         <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  13.             <view class="picker">
  14.       当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  15.       </view>
  16.         </picker>
  17. </view>
  18. <view class="page-section">
  19.     <view class="page-section-title">时间选择器</view>
  20.         <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  21.             <view class="picker">
  22.       当前选择: {{time}}
  23.       </view>
  24.         </picker>
  25. </view>
  26. <view class="page-section">
  27.     <view class="page-section-title">日期选择器</view>
  28.         <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  29.             <view class="picker">
  30.       当前选择: {{date}}
  31.       </view>
  32.         </picker>
  33. </view>
  34. <view class="page-section">
  35.     <view class="page-section-title">省市区选择器</view>
  36.         <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
  37.             <view class="picker">
  38.       当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
  39.       </view>
  40.         </picker>
  41. </view>
  1. //picker.js
  2. Page({
  3.   data: {
  4.     array: ['美国', '中国', '巴西', '日本'],
  5.     objectArray: [
  6.       {
  7.         id: 0,
  8.         name: '美国'
  9.       },
  10.       {
  11.         id: 1,
  12.         name: '中国'
  13.       },
  14.       {
  15.         id: 2,
  16.         name: '巴西'
  17.       },
  18.       {
  19.         id: 3,
  20.         name: '日本'
  21.       }
  22.     ],
  23.     index: 0,
  24.     multiArray: [['汽车', '自行车'], ['空调', '冰箱', '洗衣机', '手机'], ['面包', '馒头']],
  25.     objectMultiArray: [
  26.       [
  27.         {
  28.           id: 0,
  29.           name: '空调'
  30.         },
  31.         {
  32.           id: 1,
  33.           name: '冰箱'
  34.         }
  35.       ], [
  36.         {
  37.           id: 0,
  38.           name: '啤酒'
  39.         },
  40.         {
  41.           id: 1,
  42.           name: '红酒'
  43.         },
  44.         {
  45.           id: 2,
  46.           name: '白酒'
  47.         },
  48.       ], [
  49.         {
  50.           id: 0,
  51.           name: '矿泉水'
  52.         },
  53.         {
  54.           id: 1,
  55.           name: '可乐'
  56.         }
  57.       ]
  58.     ],
  59.     multiIndex: [0, 0, 0],
  60.     date: '2020-01-01',
  61.     time: '12:01',
  62.     region: ['北京', '北京市', '朝阳区'],
  63.     customItem: '全部'
  64.   },
  65.   bindPickerChange: function(e) {
  66.     console.log('picker change ,值为', e.detail.value)
  67.     this.setData({
  68.       index: e.detail.value
  69.     })
  70.   },
  71.   bindMultiPickerChange: function (e) {
  72.     console.log('picker change ,值为', e.detail.value)
  73.     this.setData({
  74.       multiIndex: e.detail.value
  75.     })
  76.   },
  77.   bindMultiPickerColumnChange: function (e) {
  78.     console.log(e)
  79.   },
  80.   bindDateChange: function(e) {
  81.     console.log('picker change ,值为', e.detail.value)
  82.     this.setData({
  83.       date: e.detail.value
  84.     })
  85.   },
  86.   bindTimeChange: function(e) {
  87.     console.log('picker change ,值为', e.detail.value)
  88.     this.setData({
  89.       time: e.detail.value
  90.     })
  91.   },
  92.   bindRegionChange: function (e) {
  93.     console.log('picker change ,值为', e.detail.value)
  94.     this.setData({
  95.       region: e.detail.value
  96.     })
  97.   }
  98. })