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 上编辑此页面！