普通选择器

    属性说明

    多列选择器

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

    mode = time

    平台差异说明

    属性说明

    属性名类型默认值说明平台差异说明
    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√√

    属性说明

    值说明
    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）

    示例

    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.         startDate() {
    15.             return this.getDate('start');
    16.         },
    17.         endDate() {
    18.             return this.getDate('end');
    19.         }
    20.     },
    21.     methods: {
    22.         bindPickerChange: function(e) {
    23.             console.log('picker发送选择改变，携带值为', e.target.value)
    24.             this.index = e.target.value
    25.         },
    26.         bindDateChange: function(e) {
    27.             this.date = e.target.value
    28.         },
    29.         bindTimeChange: function(e) {
    30.             this.time = e.target.value
    31.         },
    32.             const date = new Date();
    33.             let year = date.getFullYear();
    34.             let month = date.getMonth() + 1;
    35.             let day = date.getDate();
    37.             if (type === 'start') {
    38.                 year = year - 60;
    39.             } else if (type === 'end') {
    40.                 year = year + 2;
    41.             }
    42.             month = month > 9 ? month : '0' + month;;
    43.             day = day > 9 ? day : '0' + day;
    44.             return `${year}-${month}-${day}`;
    45.         }
    46.     }
    47. }

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

    预览H5效果：使用浏览器的手机模式访问

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

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