# picker

滚动选择器。选择器包括一个或多个不同值的可滚动列表。

起始版本： 1.0.0

属性：  

|名称|类型|默认值|必填|描述|
|:---------|:----------|:-------|:-|:-------------------------------------------------------------------------------------------|
|mode|string|selector|否|选择器类型。 - selector：普通选择器。 - multiSelector：多列选择器。 - time：时间选择器。 - date：日期选择器。 - region：省市区选择器。|
|disabled|boolean|false|否|是否禁用。|
|bindcancel|eventhandle|-|否|取消选择时触发。|

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

#### 普通选择器

当mode = selector时，表示普通选择器。  

|名称|类型|默认值|描述|
|:---------|:---------------------------------|:---|:----------------------------------------------------------|
|range|Array\<string\> \| Array\<Object\>|\[\]|mode为selector或multiSelector时，range有效。|
|range-key|string|-|当range是一个Object Array时，通过range-key来指定Object中key的值作为选择器显示内容。|
|value|number|0|表示选择了range中的第几个（下标从0开始）。|
|bindchange|eventhandle|-|value改变时触发change事件，event.detail = {value}。|

#### 多列选择器

当mode = multiSelector时，表示多列选择器。  

|名称|类型|默认值|描述|
|:---------------|:---------------------------------|:---|:----------------------------------------------------------|
|range|Array\<string\> \| Array\<Object\>|\[\]|mode为selector或multiSelector时，range有效。|
|range-key|string|-|当range是一个Object Array时，通过range-key来指定Object中key的值作为选择器显示内容。|
|value|Array\<number\>|\[\]|表示选择了range中的第几个（下标从0开始）。|
|bindchange|eventhandle|-|value改变时触发change事件，event.detail = {value}。|
|bindcolumnchange|eventhandle|-|列改变时触发。|

#### 时间选择器

当mode = time时，表示时间选择器。  

|名称|类型|描述|
|:---------|:----------|:-------------------------|
|value|string|表示选中的时间，格式为"hh:mm"。|
|start|string|表示有效时间范围的开始，字符串格式为"hh:mm"。|
|end|string|表示有效时间范围的结束，字符串格式为"hh:mm"。|
|bindchange|eventhandle|value改变时触发change事件。|

#### 日期选择器

当mode = date时，表示日期选择器。  

|名称|类型|默认值|描述|
|:---------|:----------|:--|:-----------------------------------------|
|value|string|当天|表示选中的日期，格式为"YYYY-MM-DD"。|
|start|string|-|表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"。|
|end|string|-|表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"。|
|bindchange|eventhandle|-|value改变时触发change事件，event.detail = {value}。|

#### 省市区选择器

当mode = region时，表示省市区选择器。  

|名称|类型|默认值|描述|
|:---------|:--------------|:---|:----------------------------------------------------------------|
|value|Array\<string\>|\[\]|表示选中的省市区，默认选中每一列的第一个值。|
|bindchange|eventhandle|-|value改变时触发change事件，event.detail = {value, code}，其中字段code是统计用区划代码。|

示例：

hxml文件：

```
<view class="page-body">
  <view class="page-section">
  <view class="contentTitle">普通选择器</view>
  <view class="contentBody">
    <view class="contentKey">当前选择</view>
    <view class="contentVal">
    <picker
      bindchange="bindPickerChange"
      value="{{index}}"
      range="{{array}}">
      <view>{{array[index]}}</view>
    </picker>
    </view>
  </view>
  <view class="contentTitle">时间选择器</view>
  <view class="contentBody">
    <view class="contentKey">当前选择</view>
    <view class="contentVal">
    <picker
      mode="time"
      value="{{time}}"
      start="09:01"
      end="21:01"
      bindchange="bindTimeChange">
      <view>{{time}}</view>
    </picker>
    </view>
  </view>
  <view class="page-body">
    <view class="page-section">
    <view class="page-section-spacing">
      <picker mode="multiSelector"
        value="{{multiIndex}}"
        range="{{multiArray}}"
        bindchange="bindPickerChange"
        bindcolumnchange="bindColumnChange">
      <view class="picker">多列选择器</view>
      </picker>
    </view>
    </view>
  </view>
  </view>
</view>
```

js文件：

```
Page({
  data: {
    array: ['皮卡丘', '小火龙', '杰尼龟', '火恐龙'],
    index: 0,
    time: '12:01',
    multiIndex: [0, 0],
    // 多列选择器：
    multiArray: [['音频', '视频'], ['酷狗', '音乐']], // 二维数组，长度是多少是几列
  },
  bindPickerChange(event) {
    // event.detail内容举例为：{"value":""}
    console.info('picker组件的选择发生改变，携带值为', event.detail);
  },
  bindTimeChange(event) {
    // event.detail.value内容举例为：**:**
    console.info('picker组件mode为time时，选择发生改变，携带值为：', event.detail.value);
    this.setData({
      time: event.detail.value
    });
  },
  bindColumnChange(event) {
    // event.detail内容举例为：{"value":[],"column":""}
    console.info('picker组件列改变时触发，携带值为：', event.detail);
  }
});
```