微信小程序表單組件picker,微信小程序日期等五種選擇器
2020-09-27
導(dǎo)讀:picker 從底部彈起的滾動選擇器,現(xiàn)支持五種選擇器,通過mode來區(qū)分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區(qū)選擇器,默認是普通選擇器。 普通選擇器:...
picker
從底部彈起的滾動選擇器,現(xiàn)支持五種選擇器,通過mode來區(qū)分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區(qū)選擇器,默認是普通選擇器。
普通選擇器:mode=selector
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
range | Array / Object Array | [] | mode為 selector 或 multiSelector 時,range 有效 |
range-key | String | 當(dāng) range 是一個 Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容 | |
value | Number | 0 | value 的值表示表示選擇了 range 中的第幾個(下標(biāo)從 0 開始)。 |
bindchange | EventHandle | value 改變時觸發(fā) change 事件,event.detail = {value: value} | |
disabled | Boolean | false | 是否禁用 |
多列選擇器:mode = multiSelector(最低版本:1.4.0)
屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
---|---|---|---|---|
range | 二維Array / 二維Object Array | [] |
mode為 selector 或 multiSelector 時,range 有效。二維數(shù)組,長度表示多少列,數(shù)組的每項表示每列的數(shù)據(jù),如[["a","b"], ["c","d"]] |
|
range-key | String | 當(dāng) range 是一個 二維Object Array 時,通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容 | ||
value | Array | [] | value 每一項的值表示選擇了 range 對應(yīng)項中的第幾個(下標(biāo)從 0 開始) | |
bindchange | EventHandle | value 改變時觸發(fā) change 事件,event.detail = {value: value} | ||
bindcolumnchange | EventHandle | 某一列的值改變時觸發(fā) columnchange 事件,event.detail = {column: column, value: value},column 的值表示改變了第幾列(下標(biāo)從0開始),value 的值表示變更值的下標(biāo) | ||
disabled | Boolean | false | 是否禁用 |
時間選擇器:mode=time
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
value | String | 表示選中的時間,格式為"hh:mm" | |
start | String | 表示有效時間范圍的開始,字符串格式為"hh:mm" | |
end | String | 表示有效時間范圍的結(jié)束,字符串格式為"hh:mm" | |
bindchange | EventHandle | value 改變時觸發(fā) change 事件,event.detail = {value: value} | |
disabled | Boolean | false | 是否禁用 |
日期選擇器:mode=date
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
value | String | 0 | 表示選中的日期,格式為"YYYY-MM-DD" |
start | String | 表示有效日期范圍的開始,字符串格式為"YYYY-MM-DD" | |
end | String | 表示有效日期范圍的結(jié)束,字符串格式為"YYYY-MM-DD" | |
fields | String | day | 有效值 year,month,day,表示選擇器的粒度 |
bindchange | EventHandle | value 改變時觸發(fā) change 事件,event.detail = {value: value} | |
disabled | Boolean | false | 是否禁用 |
fields 有效值:
值 | 說明 |
---|---|
year | 選擇器粒度為年 |
month | 選擇器粒度為月份 |
day | 選擇器粒度為天 |
省市區(qū)選擇器:mode = region(最低版本:1.4.0)
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
value | Array | [] | 表示選中的省市區(qū),默認選中每一列的第一個值 |
bindchange | EventHandle | value 改變時觸發(fā) change 事件,event.detail = {value: value} | |
disabled | Boolean | false | 是否禁用 |
第二部分:如何開通一個小商店