picker

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

普通选择器

mode = selector

属性说明

• picker在各平台的实现是有UI差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台支持循环滚动如百度小程序；有的平台没有取消按钮如App-iOS端。但均不影响功能使用。

  多列选择器

  mode = multiSelector
  平台差异说明

支付宝小程序 picker 组件不支持多列选择，可以使用 picker-view 组件替代。

属性说明

bug & tips

• 由于 JavaScript 的限制 vue 不能观测如下方式设置 value：this.value[0] = 0 （vue 注意事项），解决方式参考：hello-uniapp 示例

• 微信开发工具的pc模拟器有可能出现拖动数据错乱，使用真机正常

  时间选择器

  mode = time

  平台差异说明

  | App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ小程序 | | :—-: | :—-: | :—-: | :—-: | :—-: | :—-: | :—-: | | √ | √ | √ | √ | √ | √ | √ |

• 时间选择在App端调用的是os的原生时间选择控件，在不同平台有不同的ui表现

  属性说明

  | 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 | | :—- | :—- | :—- | :—- | :—- | | value | String | | 表示选中的时间，格式为”hh:mm” | | | start | String | | 表示有效时间范围的开始，字符串格式为”hh:mm” | App 不支持 | | end | String | | 表示有效时间范围的结束，字符串格式为”hh:mm” | App 不支持 | | @change | EventHandle | | value 改变时触发 change 事件，event.detail = {value: value} | | | @cancel | EventHandle | | 取消选择时触发 | | | disabled | Boolean | false | 是否禁用 | |

日期选择器

mode = date

平台差异说明

日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox）调用的是os的原生日期选择控件，在不同平台有不同的ui表现，当配置fields参数后使用统一的展示方式。

属性说明

fields 有效值

省市区选择器

mode = region

平台差异说明

• 因省市区选择器包含大量数据，占用体积，并非所有应用都需要，且很多城市数据有自维护需求，

所以在App和H5平台没有内置。
可以基于多列picker或picker-view，自行填充城市数据，插件市场有较多类似插件，详见。
注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行。、 这些插件中，比较推荐的是SimpleJalon的地址联动选择插件，
它可以同时兼容app-nvue、app-vue、h5、及各端小程序。

示例

查看演示
以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-title uni-common-pl">地区选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChange" :value="index" :range="array">
                        <view class="uni-input">{{array[index]}}</view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="uni-title uni-common-pl">时间选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
                        <view class="uni-input">{{time}}</view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="uni-title uni-common-pl">日期选择器</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    当前选择
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                        <view class="uni-input">{{date}}</view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            title: 'picker',
            array: ['中国', '美国', '巴西', '日本'],
            index: 0,
            date: currentDate,
            time: '12:01'
        }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    methods: {
        bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.target.value)
            this.index = e.target.value
        },
        bindDateChange: function(e) {
            this.date = e.target.value
        },
        bindTimeChange: function(e) {
            this.time = e.target.value
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
    }
}

示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
预览H5效果：使用浏览器的手机模式访问https://hellouniapp.dcloud.net.cn/pages/component/picker/picker

注意

• 在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此
• 如果需要在PC端使用picker，需注意pc端没有touchmove事件，可以配置H5模版，并引入touch-emulator.js来解决。hello uni-app的pc版也是使用了这个方案。