picker

基础库 1.0.0 开始支持，低版本需做兼容处理。

从底部弹起的滚动选择器。

属性类型默认值必填说明最低版本
header-textstring否选择器的标题，仅安卓可用2.11.0
modestringselector否选择器类型1.0.0
disabledbooleanfalse否是否禁用1.0.0
bindcanceleventhandle否取消选择时触发1.9.90

mode 的合法值

值说明最低版本
selector普通选择器
multiSelector多列选择器
time时间选择器
date日期选择器
region省市区选择器

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。

普通选择器：mode = selector

属性名类型默认值说明最低版本
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuenumber0表示选择了 range 中的第几个（下标从 0 开始）
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

多列选择器：mode = multiSelector

属性名类型默认值说明最低版本
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valuearray[]表示选择了 range 中的第几个（下标从 0 开始）
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}
bindcolumnchangeeventhandle列改变时触发

时间选择器：mode = time

属性名类型默认值说明最低版本
valuestring表示选中的时间，格式为”hh:mm”
startstring表示有效时间范围的开始，字符串格式为”hh:mm”
endstring表示有效时间范围的结束，字符串格式为”hh:mm”
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

日期选择器：mode = date

属性名类型默认值说明最低版本
valuestring当天表示选中的日期，格式为”YYYY-MM-DD”
startstring表示有效日期范围的开始，字符串格式为”YYYY-MM-DD”
endstring表示有效日期范围的结束，字符串格式为”YYYY-MM-DD”
fieldsstringday有效值 year,month,day，表示选择器的粒度
bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

fields 有效值：*

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

省市区选择器：mode = region 1.4.0

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

示例代码

在开发者工具中预览效果

  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 mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  12.     <view class="picker">
  13.       当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
  14.     </view>
  15.   </picker>
  16. </view>
  17. <view class="section">
  18.   <view class="section__title">时间选择器</view>
  19.   <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  20.     <view class="picker">
  21.       当前选择: {{time}}
  22.     </view>
  23.   </picker>
  24. </view>
  26. <view class="section">
  27.   <view class="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="section">
  35.   <view class="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. 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: function(e) {
  73.     console.log('picker发送选择改变，携带值为', e.detail.value)
  74.     this.setData({
  75.       index: e.detail.value
  76.     })
  77.   },
  78.   bindMultiPickerChange: function (e) {
  79.     console.log('picker发送选择改变，携带值为', e.detail.value)
  80.     this.setData({
  81.       multiIndex: e.detail.value
  82.     })
  83.   },
  84.   bindMultiPickerColumnChange: function (e) {
  85.     console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
  86.     var 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: function(e) {
  148.     console.log('picker发送选择改变，携带值为', e.detail.value)
  149.     this.setData({
  150.       date: e.detail.value
  151.     })
  152.   },
  153.   bindTimeChange: function(e) {
  154.     console.log('picker发送选择改变，携带值为', e.detail.value)
  155.     this.setData({
  156.       time: e.detail.value
  157.     })
  158.   },
  159.   bindRegionChange: function (e) {
  160.     console.log('picker发送选择改变，携带值为', e.detail.value)
  161.     this.setData({
  162.       region: e.detail.value
  163.     })
  164.   }
  165. })

picker - 图1