逐福科技
177-371-24501(同微信)

微信小程序表单组件picker,微信小程序日期等五种选择器

2022-04-21 管理员

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 是否禁用

 

 

 

 

多列选择器: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 的值表示变更值的下标  
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}
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}
disabled Boolean false 是否禁用

 

fields 有效值:

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

 

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

属性名 类型 默认值 说明
value Array [] 表示选中的省市区,默认选中每一列的第一个值
bindchange EventHandle   value 改变时触发 change 事件,event.detail = {value: value}
disabled Boolean false 是否禁用

上一篇:微信小程序表单组件单选框radio,radio-group单项选择器
下一篇:微信小程序视图容器cover-view,微信小程序cover-view示例
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
郑州快速建站:网站的站内优化怎么做
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话(微信同号)

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持:酷微科技

电话咨询 在线咨询 服务项目 SEO优化