• picker

    picker

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

    普通选择器

    mode = selector

    属性说明

    属性名类型默认值说明
    rangeArray / Array＜Object＞[]mode为 selector 或 multiSelector 时，range 有效
    range-keyString当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
    valueNumber0value 的值表示选择了 range 中的第几个（下标从 0 开始）
    @changeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
    disabledBooleanfalse是否禁用
    @cancelEventHandle取消选择或点遮罩层收起 picker 时触发

    多列选择器

    mode = multiSelector

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    √√√x√√

    属性说明

    属性名类型默认值说明
    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 开始）
    @changeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
    @columnchangeEventHandle某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
    @cancelEventHandle取消选择时触发
    disabledBooleanfalse是否禁用

    bug & tips

    • 由于 JavaScript 的限制 vue 不能观测如下方式设置 value：this.value[0] = 0 （vue 注意事项），解决方式参考：hello-uniapp 示例
    • 微信开发工具的pc模拟器有可能出现拖动数据错乱，使用真机正常时间选择器

    mode = time

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    √√√x√√

    属性说明

    属性名类型默认值说明平台差异说明
    valueString表示选中的时间，格式为"hh:mm"
    startString表示有效时间范围的开始，字符串格式为"hh:mm"5+App 不支持
    endString表示有效时间范围的结束，字符串格式为"hh:mm"5+App 不支持
    @changeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
    @cancelEventHandle取消选择时触发
    disabledBooleanfalse是否禁用

    日期选择器

    mode = date

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    √√√x√√

    属性说明

    属性名类型默认值说明平台差异说明
    valueString0表示选中的日期，格式为"YYYY-MM-DD"
    startString表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
    endString表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
    fieldsStringday有效值 year,month,day，表示选择器的粒度H5、微信小程序、百度小程序、头条小程序
    @changeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
    @cancelEventHandle取消选择时触发
    disabledBooleanfalse是否禁用

    fields 有效值

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

    省市区选择器

    mode = region

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xx√x√√
    • 因省市区选择器包含大量数据，占用体积，且很多城市数据有自维护需求，所以在App和H5平台没有内置。有两种方案解决：
      • 使用mpvue-picker代替，全端通用，自定义性更强，参考： Hello uni-app的模板-多列选择picker，或插件市场。手机预览网址：https://uniapp.dcloud.io/h5/pages/template/mpvue-picker/mpvue-picker
      • 在H5和App平台使用多列选择器，自行填充城市数据（上述mpvue-picker或hello uni-app自带城市数据city.data.js）
        属性名类型默认值说明
        valueArray[]表示选中的省市区，默认选中每一列的第一个值
        custom-itemString可为每一列的顶部添加一个自定义的项
        @changeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}
        @cancelEventHandle取消选择时触发
        disabledBooleanfalse是否禁用

    示例

    1. <template>
    2.     <view>
    3.         <view class="uni-title uni-common-pl">地区选择器</view>
    4.         <view class="uni-list">
    5.             <view class="uni-list-cell">
    6.                 <view class="uni-list-cell-left">
    7.                     当前选择
    8.                 </view>
    9.                 <view class="uni-list-cell-db">
    10.                     <picker @change="bindPickerChange" :value="index" :range="array">
    11.                         <view class="uni-input">{{array[index]}}</view>
    12.                     </picker>
    13.                 </view>
    14.             </view>
    15.         </view>
    17.         <view class="uni-title uni-common-pl">时间选择器</view>
    18.         <view class="uni-list">
    19.             <view class="uni-list-cell">
    20.                 <view class="uni-list-cell-left">
    21.                     当前选择
    22.                 </view>
    23.                 <view class="uni-list-cell-db">
    24.                     <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
    25.                         <view class="uni-input">{{time}}</view>
    26.                     </picker>
    27.                 </view>
    28.             </view>
    29.         </view>
    31.         <view class="uni-title uni-common-pl">日期选择器</view>
    32.         <view class="uni-list">
    33.             <view class="uni-list-cell">
    34.                 <view class="uni-list-cell-left">
    35.                     当前选择
    36.                 </view>
    37.                 <view class="uni-list-cell-db">
    38.                     <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
    39.                         <view class="uni-input">{{date}}</view>
    40.                     </picker>
    41.                 </view>
    42.             </view>
    43.         </view>
    44.     </view>
    45. </template>
    1. export default {
    2.     data() {
    3.         const currentDate = this.getDate({
    4.             format: true
    5.         })
    6.         return {
    7.             title: 'picker',
    8.             array: ['中国', '美国', '巴西', '日本'],
    9.             index: 0,
    10.             date: currentDate,
    11.             time: '12:01'
    12.         }
    13.     },
    14.     computed: {
    15.         startDate() {
    16.             return this.getDate('start');
    17.         },
    18.         endDate() {
    19.             return this.getDate('end');
    20.         }
    21.     },
    22.     methods: {
    23.         bindPickerChange: function(e) {
    24.             console.log('picker发送选择改变，携带值为', e.target.value)
    25.             this.index = e.target.value
    26.         },
    27.         bindDateChange: function(e) {
    28.             this.date = e.target.value
    29.         },
    30.         bindTimeChange: function(e) {
    31.             this.time = e.target.value
    32.         },
    33.         getDate(type) {
    34.             const date = new Date();
    35.             let year = date.getFullYear();
    36.             let month = date.getMonth() + 1;
    37.             let day = date.getDate();
    39.             if (type === 'start') {
    40.                 year = year - 60;
    41.             } else if (type === 'end') {
    42.                 year = year + 2;
    43.             }
    44.             month = month > 9 ? month : '0' + month;;
    45.             day = day > 9 ? day : '0' + day;
    46.             return `${year}-${month}-${day}`;
    47.         }
    48.     }
    49. }

    uniapp

    示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中

    预览H5效果：使用浏览器的手机模式访问https://uniapp.dcloud.io/h5/pages/component/picker/picker

    注意

    • 在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此
    • app-nvue 平台，mode 目前仅支持 selector time date

    发现错误？想参与编辑？在 GitHub 上编辑此页面！