返回
怎么开小程序商城店铺
  • 店铺开通

    销客多小程序商城，可快速开通上架店铺

  • 拉新推广

    链接12亿微信流量，拉新工具沉淀意向客户

  • 复购裂变

    拼团、分销等提升转化，不断裂变新用户购买

  • 对接门店

    线上导流、促活门店，实现线上下同步发展

制作小程序
HiShop > Hi小程序 > 小程序开发 >

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

2020-09-27 作者：黄先生

picker

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

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

普通选择器：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 是否禁用

推荐文章

注册小程序
注册小程序