微信小程序之组件Picker[五类选择器[【默认】普通选择器,多列选择器,时间选择器,日期选择器,省市选择器]]

Picker

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

普通选择器:mode = selector

属性名 类型 默认值 说明 最低版本
range Array / Object Array [] mode为 selector 或 multiSelector 时,range 有效
range-key String 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number 0 value 的值表示选择了 range 中的第几个(下标从 0 开始)
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用
bindcancel EventHandle 取消选择或点遮罩层收起 picker 时触发 1.9.90

多列选择器:mode = multiSelector(最低版本:1.4.0

属性名 类型 默认值 说明 最低版本
range 二维Array / 二维Object Array [] mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]
range-key String 当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Array [] value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
bindcolumnchange EventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
bindcancel EventHandle 取消选择时触发 1.9.90
disabled Boolean false 是否禁用

时间选择器:mode = time

属性名 类型 默认值 说明 最低版本
value String 表示选中的时间,格式为"hh:mm"
start String 表示有效时间范围的开始,字符串格式为"hh:mm"
end String 表示有效时间范围的结束,字符串格式为"hh:mm"
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
bindcancel EventHandle 取消选择时触发 1.9.90
disabled Boolean false 是否禁用

日期选择器:mode = date

属性名 类型 默认值 说明 最低版本
value String 0 表示选中的日期,格式为"YYYY-MM-DD"
start String 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
end String 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fields String day 有效值 year,month,day,表示选择器的粒度
bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value}
bindcancel EventHandle 取消选择时触发 1.9.90
disabled Boolean false 是否禁用

fields 有效值:

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

省市区选择器:mode = region(最低版本:1.4.0

属性名 类型 默认值 说明 最低版本
value Array [] 表示选中的省市区,默认选中每一列的第一个值
custom-item</
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值