picker封装 uniapp_表单组件 - picker - 《uni-app 组件文档》 - 书栈网 · BookStack

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平台没有内置。有两种方案解决：在H5和App平台使用多列选择器，自行填充城市数据(上述mpvue-picker或hello uni-app自带城市数据city.data.js)属性名类型默认值说明valueArray[]表示选中的省市区，默认选中每一列的第一个值

custom-itemString可为每一列的顶部添加一个自定义的项

@changeEventHandlevalue 改变时触发 change 事件，event.detail = {value: value}

@cancelEventHandle取消选择时触发

disabledBooleanfalse是否禁用

示例

地区选择器

当前选择

{{array[index]}}

时间选择器

当前选择

{{time}}

日期选择器

当前选择

{{date}}

exportdefault{

data(){

constcurrentDate=this.getDate({

format:true

})

return{

title:'picker',

array:['中国','美国','巴西','日本'],

index:0,

date:currentDate,

time:'12:01'

}

},

computed:{

startDate(){

returnthis.getDate('start');

},

endDate(){

returnthis.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){

constdate=newDate();

letyear=date.getFullYear();

letmonth=date.getMonth()+1;

letday=date.getDate();

if(type==='start'){

year=year-60;

}elseif(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中

注意

在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。需等待一下，或手动触停滚动再点确定。所有平台均如此

app-nvue 平台，mode 目前仅支持 selector time date