您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“微信小程序的五種選擇器是什么”,內容詳細,步驟清晰,細節處理妥當,希望這篇“微信小程序的五種選擇器是什么”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
從底部彈起的滾動選擇器,現支持五種選擇器,通過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 | 是否禁用 |
讀到這里,這篇“微信小程序的五種選擇器是什么”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。