• picker

    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