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

2020-09-27

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

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 有效值：

省市区选择器：mode = region（最低版本：1.4.0）

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

第二部分：如何开通一个小商店

上一篇：微信小程序内容组件text文本,微信小程序文本示例 下一篇：微信小程序表单组件picker-view,picker-view嵌入页面的滚动选择器