picker 底部弹起的滚动选择器

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

    普通选择器：mode = selector

    时间选择器：mode = time

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

    日期选择器：mode = date

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

    多列选择器：mode = multiSelector

    省市区选择器：mode = region

    属性名类型默认值说明
    valueArray[]表示选中的省市区，默认选中每一列的第一个值
    custom-itemString可为每一列的顶部添加一个自定义的项
    bindchangeEventHandlevalue 改变时触发 change 事件，event.detail = {value}， 暂不支持统计用区划代码（code）、邮政编码（postcode）。
    titleString选择器标题（仅安卓有效）默认值为 "设置"; 基础库 3.110.3 及以上废弃

    扫码体验

    2.     data: {
    3.         arrIndex: 0,
    4.         selector: ['React', 'Vue', 'AngularJS']
    5.     },
    6.     selectorChange(e) {
    7.         console.log('picker-selector changed，值为', e.detail.value);
    8.         this.setData('arrIndex', e.detail.value);
    9.     },
    10.     cancel() {
    11.         swan.showToast({
    12.             title: '用户取消选择',
    13.             icon: 'none'
    14.         });
    15.     }
    16. });

    代码示例 2：时间选择器

    1. <view class="wrap">
    2.     <view class="title">时间选择</view>
    3.     <view class="section">
    4.         <picker mode="time" value="{{time}}" start="1:01" end="22:59" bind:change="timeChange" disabled="false" bind:cancel="cancel">
    5.             <view class="picker">
    6.                 <text class='chooseItem'>当前选择:</text>{{time}}
    7.             </view>
    8.         </picker>
    9.     </view>
    10. </view>

    代码示例 3 ：日期选择器

    1. <view class="wrap">
    2.     <view class="title">日期选择</view>
    3.     <view class="section date-section">
    4.         <picker mode="date" value="{{dateDay}}" bind:change="dateChangeDay" fields="day" bind:cancel="cancel">
    5.             <view>
    6.                 <text class='chooseItem'>当前选择:</text>{{dateDay}}
    7.             </view>
    8.         </picker>
    9.     </view>
    1. Page({
    2.     data: {
    3.         dateDay: '2018-01-05',
    4.     },
    5.     dateChangeDay(e) {
    6.         console.log('picker-date changed，值为', e.detail.value);
    7.         this.setData(
    8.             'dateDay', e.detail.value
    9.         );
    10.     },
    12.         swan.showToast({
    13.             title: '用户取消选择',
    14.             icon: 'none'
    15.         });
    16.     }
    17. });

    代码示例 4 ：多列选择器

    在开发者工具中预览效果

    1. Page({
    2.     data: {
    3.         multiIndex: [0, 0, 0],
    4.         multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]
    5.     },
    6.     bindMultiPickerChange: function (e) {
    7.         console.log('picker-multiSelector changed，值为', e.detail.value)
    8.         this.setData(
    9.             'multiIndex', e.detail.value
    10.         );
    11.     },
    13.     bindMultiPickerColumnChange: function (e) {
    14.         console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    15.         var data = {
    16.             multiArray: this.getData('multiArray'),
    17.             multiIndex: this.getData('multiIndex')
    18.         };
    19.         data.multiIndex[e.detail.column] = e.detail.value;
    20.         switch (e.detail.column) {
    21.             case 0:
    22.                 switch (data.multiIndex[0]) {
    23.                     case 0:
    24.                         data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
    25.                         data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
    26.                         break;
    27.                     case 1:
    28.                         data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
    29.                         data.multiArray[2] = ['鲫鱼', '带鱼'];
    30.                         break;
    31.                 }
    32.                 data.multiIndex[1] = 0;
    33.                 data.multiIndex[2] = 0;
    34.                 break;
    35.                 switch (data.multiIndex[0]) {
    36.                     case 0:
    37.                         switch (data.multiIndex[1]) {
    38.                             case 0:
    40.                                 break;
    41.                             case 1:
    42.                                 data.multiArray[2] = ['蛔虫'];
    43.                                 break;
    44.                             case 2:
    45.                                 data.multiArray[2] = ['蚂蚁', '蚂蟥'];
    46.                                 break;
    47.                             case 3:
    48.                                 data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
    49.                                 break;
    50.                             case 4:
    51.                                 data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
    52.                                 break;
    53.                         }
    54.                         break;
    55.                     case 1:
    56.                         switch (data.multiIndex[1]) {
    57.                             case 0:
    58.                                 data.multiArray[2] = ['鲫鱼', '带鱼'];
    59.                                 break;
    60.                             case 1:
    61.                                 data.multiArray[2] = ['青蛙', '娃娃鱼'];
    62.                                 break;
    63.                             case 2:
    64.                                 data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
    65.                                 break;
    66.                         }
    67.                         break;
    68.                 }
    69.                 data.multiIndex[2] = 0;
    70.                 break;
    71.         }
    72.         this.setData('multiArray', data.multiArray);
    73.         this.setData('multiIndex', data.multiIndex);
    74.     }
    75. });

    1. <view class="wrap">
    2.     <view class="title">地区选择</view>
    3.     <view class="section">
    4.         <picker mode="region" bind:change="regionChange" custom-item="{{customItem}}" title="地区选择器" bind:cancel="cancel">
    5.             <view class="picker">
    6.                 <text class='chooseItem'>当前选择:</text>{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
    7.             </view>
    8.         </picker>
    9.     </view>

    • Tip：基础库版本 11.15 及以上：picker 组件双端都是从底部弹出。