picker

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

mode = selector

普通选择器。

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

mode = multiSelector

多列选择器。

属性名类型默认值说明
range二维Array/Object Array[ ]mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
range-keyString同普通选择器
valueArray[]value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
bindchangeEventHandlervalue 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchangeEventHandler某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
bindcancelEventHandler取消选择时触发
disabledBooleanfalse是否禁用

mode = time

时间选择器。

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

mode = date

日期选择器。

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

mode = region

地区选择器。

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

示例

  1. <view class="section__title">普通选择器</view>
  2. <picker value="{{index}}" range="{{array}}"
  3.     bindchange="bindPickerChange" bindcancel="bindPickerCancel">
  4.   <view class="picker">
  5.     当前选择：{{array[index]}}
  6.   </view>
  7. </picker>
  9. <view class="section__title">普通Object选择器</view>
  10. <picker bindchange="bindObjectPickerChange"
  11.     value="{{objectIndex}}" range="{{objectArray}}" range-key="en">
  12.   <view class="picker">
  13.     当前选择：{{objectArray[objectIndex]['en']}}
  14.   </view>
  15. </picker>
  17. <view class="section__title">多列选择器</view>
  18. <picker mode="multiSelector"
  19.     bindchange="bindMultiPickerChange"
  20.     bindcolumnchange="bindMultiPickerColumnChange"
  21.     value="{{multiIndex}}" range="{{multiArray}}">
  22.   <view class="picker">
  23.     当前选择：{{multiArray[0][multiIndex[0]]}}，
  24.     {{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  25.   </view>
  26. </picker>
  28. <view class="section__title">时间选择器</view>
  29. <picker mode="time" value="{{time}}" start="{{timeStart}}" end="{{timeEnd}}"
  30.     bindchange="bindTimeChange">
  31.   <view class="picker">
  32.     当前选择: {{time}}
  33.   </view>
  34. </picker>
  36. <view class="section__title">日期选择器</view>
  37. <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
  38.     bindchange="bindDateChange" fields="year">
  39.   <view class="picker">
  40.     当前选择: {{date}}
  41.   </view>
  42. </picker>
  44. <view class="section__title">日期选择器</view>
  45. <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
  46.     bindchange="bindDateChange" fields="month">
  47.   <view class="picker">
  48.     当前选择: {{date}}
  49.   </view>
  50. </picker>
  52. <view class="section__title">日期选择器</view>
  53. <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
  54.     bindchange="bindDateChange" fields="day">
  55.   <view class="picker">
  56.     当前选择: {{date}}
  57.   </view>
  58. </picker>
  1. var ms = [
  2.     [// 0
  3.         '无脊柱动物',
  4.         '脊柱动物'
  5.     ],
  6.     [// 1
  7.         [// 1 0
  8.             '扁性动物',
  9.             '线形动物',
  10.             '环节动物',
  11.             '软体动物',
  12.             '节肢动物'
  13.         ],
  14.         [// 1 1
  15.             '鱼',
  16.             '两栖动物',
  17.             '爬行动物',
  18.       'test'
  19.         ]
  20.     ],
  21.     [// 2
  22.         [// 2 0
  23.             ['猪肉绦虫', '吸血虫'],
  24.             ['蛔虫'],
  25.             ['蚂蚁', '蚂蟥'],
  26.             ['河蚌', '蜗牛', '蛞蝓'],
  27.             ['昆虫', '甲壳动物', '蛛形动物', '多足动物']
  28.         ],
  29.         [// 2 1
  30.             ['鲫鱼', '带鱼'],
  31.             ['青蛙', '娃娃鱼'],
  32.             ['蜥蜴', '龟', '壁虎'],
  33.       []
  34.         ]
  35.     ]
  36. ];
  37. Page({
  38.     data: {
  39.         array: ['美国', '中国', '巴西', '日本'],
  40.         index: 0,
  41.         objectArray: [
  42.             {
  43.                 id: 0,
  44.                 name: '美国',
  45.                 en: 'USA'
  46.             },
  47.             {
  48.                 id: 1,
  49.                 name: '中国',
  50.                 en: 'China'
  51.             },
  52.             {
  53.                 id: 2,
  54.                 name: '巴西',
  55.                 en: "Brasil"
  56.             },
  57.             {
  58.                 id: 3,
  59.                 name: '日本',
  60.                 en: "Japan"
  61.             }
  62.         ],
  63.         objectIndex: 0,
  64.         multiArray: [
  65.             ['无脊柱动物', '脊柱动物'],
  66.             ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
  67.             ['猪肉绦虫', '吸血虫']
  68.         ],
  69.         multiIndex: [0, 0, 0],
  70.         objectMultiIndex: [0,0,0],
  71.         date: '2016-09-01',
  72.         time: '12:01',
  73.         timeStart: '09:01',
  74.         timeEnd: '21:01'
  75.     },
  76.     bindPickerChange: function (e) {
  77.         console.log('picker发送选择改变，携带值为', e.detail.value)
  78.         this.setData({
  79.             index: e.detail.value
  80.         })
  81.     },
  82.     bindObjectPickerChange: function (e) {
  83.         console.log('picker发送选择改变，携带值为', e.detail.value)
  84.         this.setData({
  85.             objectIndex: e.detail.value
  86.         })
  87.     },
  88.     bindMultiPickerChange: function (e) {
  89.         console.log('picker发送选择改变，携带值为', e.detail.value)
  90.         this.setData({
  91.             multiIndex: e.detail.value
  92.         })
  93.     },
  94.     bindMultiPickerColumnChange: function (e) {
  95.         // return;
  96.         console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
  97.         var data = {
  98.             multiArray: this.data.multiArray,
  99.             multiIndex: this.data.multiIndex
  100.         };
  101.         switch (e.detail.column) {
  102.             case 0:
  103.                 data.multiIndex[0] = e.detail.value;
  104.                 data.multiIndex[1] = 0;
  105.                 data.multiIndex[2] = 0;
  107.                 data.multiArray[1] = ms[1][data.multiIndex[0]];
  108.                 data.multiArray[2] = ms[2][data.multiIndex[0]][data.multiIndex[1]];
  109.                 break;
  110.             case 1:
  111.                 data.multiIndex[1] = e.detail.value;
  112.                 data.multiIndex[2] = 0;
  114.                 data.multiArray[2] = ms[2][data.multiIndex[0]][data.multiIndex[1]];
  115.                 break;
  116.             case 2:
  117.                 data.multiIndex[2] = e.detail.value;
  118.                 break;
  119.         }
  120.         this.setData(data);
  121.     },
  122.     bindDateChange: function (e) {
  123.         console.log('picker发送选择改变，携带值为', e.detail.value)
  124.         this.setData({
  125.             date: e.detail.value
  126.         })
  127.     },
  128.     bindTimeChange: function (e) {
  129.         console.log('picker发送选择改变，携带值为', e.detail.value)
  130.         this.setData({
  131.             time: e.detail.value
  132.         })
  133.     },
  134.     bindPickerCancel: function (e) {
  135.         console.log(e);
  136.         tt.showToast({title: 'cancel'})
  137.     }
  138. })

picker - 图1

原文: https://developer.toutiao.com/docs/comp/picker.html