avatar
為什么要自定義picker
原生小程序picker不支持自定義樣式，無聯(lián)動。
該自定組件
- 支持自定義數(shù)據(jù)
- 支持自定義樣式
- 支持傳入和返回對象或者基本類型
- 支持聯(lián)動（改變父列，子列根據(jù)關(guān)聯(lián)自動變化）
使用
直接將picker文件夾拖入工程
在某page的json文件中配置
{
"usingComponents": {
"picker": picker.js的相對路徑
}
}
- 在page的wxml文件中使用
<picker
isShowPicker="{{isShow_02}}"
bind:sure="sureCallBack_02"
bind:cancle="cancleCallBack_02"
scrollType="normal"
listData="{{listData_02}}"
indicatorStyle="height:80px"
maskStyle=""
titleStyle=""
sureStyle="color:blue;font-size:16px;"
cancelStyle="color:red;font-size:16px;"
chooseItemTextStyle="color:green;"
pickerHeaderStyle="background:#eee;"
titleText="自定義標(biāo)題"
cancelText="cancle"
sureText="sure"
></picker>
- 更多使用方式，可自行參考demo
參數(shù)說明
| name | type | required | default | Description |
|---|---|---|---|---|
| isShowPicker | Boolean | ? | false | 顯示隱藏picker，需要在bindsure和bindcancle中手動設(shè)為false |
| scrollType | String | ? | 'normal' | picker類型，'normal':非聯(lián)動picker 'link':聯(lián)動picker |
| listData | Array | ? | [] | picker數(shù)據(jù)源,是一個數(shù)組，scrollType='normal'時，數(shù)組成員也是數(shù)組，數(shù)組成員數(shù)量就是picker列數(shù);scrollType='link'時，listData格式需為固定格式 |
| keyWordsOfShow | String | ? | 'name' | 當(dāng)listData的的每一個成員，是由對象組成的數(shù)組時，keyWordsOfShow作為對象的key，其value用于顯示；或者當(dāng)picker='link'時，供顯示的key |
| defaultPickData | Array | ? | [] | 設(shè)置picker默認(rèn)選擇 |
| indicatorStyle | String | ? | '' | 設(shè)置選擇器中間選中框的樣式（詳見picker-view）如，每一行的高度 view |
| maskStyle | String | ? | '' | 設(shè)置蒙層的樣式（詳見picker-view） view |
| titleStyle | String | ? | '' | 標(biāo)題欄標(biāo)題樣式 view |
| sureStyle | String | ? | '' | 標(biāo)題欄確定樣式 text |
| cancelStyle | String | ? | '' | 標(biāo)題欄取消樣式 text |
| chooseItemTextStyle | Array | ? | '' | 設(shè)置picker列表文案樣式 text |
| pickerHeaderStyle | String | ? | '' | 標(biāo)題欄樣式 view |
| titleText | String | ? | '' | 標(biāo)題文案 |
| cancelText | String | ? | '' | 取消按鈕文案 |
| sureText | String | ? | '' | 確定按鈕文案 |
| bindsure | EventHandle | ? | 無 | 點擊確定觸發(fā)的事件，event.detail = value |
| bindcancle | EventHandle | ? | 無 | 點擊取消觸發(fā)的事件 |
注意
- 必須在bindsure和bindcancle中將isShowPicker設(shè)為false。
- scrollType='normal'時，listData數(shù)據(jù)結(jié)構(gòu)代碼如下；當(dāng)?shù)诙S數(shù)組的成員為對象時，需指定用于顯示的key(通過keyWordsOfShow屬性)，默認(rèn)為'name'。若要設(shè)置默認(rèn)選中，設(shè)置 defaultPickData=[第一選中的列索引,第二選中的列索引,第三選中的列索引,...]，如[1,2,1]
//listData數(shù)據(jù)結(jié)構(gòu)
[
[對象或者普通類型],
[對象或者普通類型],
[對象或者普通類型],
...
]
- scrollType='link'時，listData數(shù)據(jù)結(jié)構(gòu)代碼如下，"children"字段為必須；'用于顯示的key'對應(yīng)keyWordsOfShow屬性。若要設(shè)置默認(rèn)選中，設(shè)置 defaultPickData = [{第一列選中項對應(yīng)的唯一key:value}, {第二列選中項對應(yīng)的唯一key:value}, {第三列選中項對應(yīng)的唯一key:value},...]，如[{id:2},{id:21},{id:213}]
//listData數(shù)據(jù)結(jié)構(gòu)
[
{
用于顯示的key:'',
children:[
{
用于顯示的key:'',
children:[
{
用于顯示的key:'',
children:[
],
其他屬性...,
}
],
其他屬性...,
},
...
],
其他屬性...,
},
...
]
更新日志
- 0.0.1 初始化項目。
