picker

解释：
选择器

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

时间选择器：mode = time

属性名类型默认值说明
valueString-表示选中的时间，格式为 “hh:mm”
startString-表示有效时间范围的开始，字符串格式为 “hh:mm”
endString-表示有效时间范围的结束，字符串格式为 “hh:mm”
bindchangeEventHandle-value 改变时触发 change 事件，event.detail = {value: value}
disabledBooleanfalse是否禁用
bindcancelEventHandle-取消选择或点遮罩层收起 picker 时触发

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

普通选择器：mode = selector
属性名类型默认值说明
rangeArray/Array.<object>[]mode 为 selector 或 multiSelector 时，range 有效
range-keyString-当 range 是一个 Array.<object> 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueNumber0value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchangeEventHandle-value 改变时触发 change 事件，event.detail = {value: value}
disabledBooleanfalse是否禁用
titleString-选择器标题（仅安卓有效）默认值为 “设置”
bindcancelEventHandle-取消选择或点击遮罩层收起 picker 时触发。

多列选择器：mode = multiSelector
属性名类型默认值说明
range二维 Array/Array.<object>[]mode 为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,”b”], [“c”,”d”]]
range-keyString-当 range 是一个二维 Array.<object> 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
valueArray[ ]value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
bindcolumnchangeEventHandle-某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
bindchangeEventHandle-value 改变时触发 change 事件，event.detail = {value: value}
disabledBooleanfalse是否禁用
titleString-选择器标题（仅安卓有效）默认值为 “设置”
bindcancelEventHandle-取消选择时触发

省市区选择器：mode = region
属性名类型默认值说明
valueArray[]表示选中的省市区，默认选中每一列的第一个值
custom-itemString-可为每一列的顶部添加一个自定义的项
bindchangeEventHandle-value 改变时触发 change 事件，event.detail = {value: value}
disabledBooleanfalse是否禁用
titleString-选择器标题（仅安卓有效）默认值为 “设置”
bindcancelEventHandle-取消选择时触发

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

示例：在开发者工具中预览效果

  1. <view class="section">
        <view class="section-title">时间选择器</view>
        <picker mode="time" value="{{time}}" start="11:11" end="23:11" bindchange="bindTimeChange">
            <view class="picker">
                当前选择: {{time}}
            </view>
        </picker>
    </view>
    <view class="section">
        <view class="section-title">单列选择器</view>
        <picker mode="selector" value="{{index}}" range="{{array}}" bind:change="selectorChange" title="普通选择器">
            <view class="picker">
                当前选择: {{array[index]}}
            </view>
        </picker>
    </view>
    <view class="section">
        <view class="section-title">多列选择器</view>
        <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" title="多列选择器">
            <view class="picker">
                当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
            </view>
        </picker>
    </view>
    <view class="section">
        <view class="section-title">地区选择器</view>
        <picker mode="region" bindchange="regionChange" custom-item="{{customItem}}" title="省市区选择器">
            <view class="picker">
                当前选择：{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
            </view>
        </picker>
    </view>

  1. Page({
        data: {
            time: '12:12',
            index: 1,
            array: ['科目一', '科目二', '科目三', '科目四'],
            multiIndex: [0, 0, 0],
            multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
            regionData: ['全部', '全部', '全部'],
            customItem: '全部'
        },
        bindTimeChange: function(e) {
            console.log('picker-time changed，值为', e.detail.value)
            this.setData({
                time: e.detail.value
            })
        },
        selectorChange: function (e) {
            console.log('picker-selector changed，值为', e.detail.value)
            this.setData(
                'index', e.detail.value
            );
        },

        bindMultiPickerChange: function (e) {
            console.log('picker-multiSelector changed，值为', e.detail.value)
            this.setData(
                'multiIndex', e.detail.value
            );
        },

        bindMultiPickerColumnChange: function (e) {
            console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
            var data = {
                multiArray: this.getData('multiArray'),
                multiIndex: this.getData('multiIndex')
            };
            data.multiIndex[e.detail.column] = e.detail.value;
            switch (e.detail.column) {
                case 0:
                    switch (data.multiIndex[0]) {
                        case 0:
                            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                            break;
                        case 1:
                            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                            data.multiArray[2] = ['鲫鱼', '带鱼'];
                            break;
                    }
                    data.multiIndex[1] = 0;
                    data.multiIndex[2] = 0;
                    break;
                case 1:
                    switch (data.multiIndex[0]) {
                        case 0:
                            switch (data.multiIndex[1]) {
                                case 0:
                                    data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                    break;
                                case 1:
                                    data.multiArray[2] = ['蛔虫'];
                                    break;
                                case 2:
                                    data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                                    break;
                                case 3:
                                    data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                    break;
                                case 4:
                                    data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                    break;
                            }
                            break;
                        case 1:
                            switch (data.multiIndex[1]) {
                                case 0:
                                    data.multiArray[2] = ['鲫鱼', '带鱼'];
                                    break;
                                case 1:
                                    data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                    break;
                                case 2:
                                    data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                    break;
                            }
                            break;
                    }
                    data.multiIndex[2] = 0;
                    break;
            }
            this.setData('multiArray', data.multiArray);
            this.setData('multiIndex', data.multiIndex);
        },

        regionChange: function (e) {
            this.setData(
                'regionData', e.detail.value
            );
            console.log('picker-time changed，值为', e.detail.value)
        }

    });