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