微信小程序表單組件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嵌入頁面的滾動選擇器