avatar
为什么要自定义picker
原生小程序picker不支持自定义样式，无联动。
该自定组件
- 支持自定义数据
- 支持自定义样式
- 支持传入和返回对象或者基本类型
- 支持联动（改变父列，子列根据关联自动变化）
使用
直接将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="自定义标题"
cancelText="cancle"
sureText="sure"
></picker>
- 更多使用方式，可自行参考demo
参数说明
| name | type | required | default | Description |
|---|---|---|---|---|
| isShowPicker | Boolean | ✓ | false | 显示隐藏picker，需要在bindsure和bindcancle中手动设为false |
| scrollType | String | ✗ | 'normal' | picker类型，'normal':非联动picker 'link':联动picker |
| listData | Array | ✓ | [] | picker数据源,是一个数组，scrollType='normal'时，数组成员也是数组，数组成员数量就是picker列数;scrollType='link'时，listData格式需为固定格式 |
| keyWordsOfShow | String | ✗ | 'name' | 当listData的的每一个成员，是由对象组成的数组时，keyWordsOfShow作为对象的key，其value用于显示；或者当picker='link'时，供显示的key |
| defaultPickData | Array | ✗ | [] | 设置picker默认选择 |
| indicatorStyle | String | ✗ | '' | 设置选择器中间选中框的样式（详见picker-view）如，每一行的高度 view |
| maskStyle | String | ✗ | '' | 设置蒙层的样式（详见picker-view） view |
| titleStyle | String | ✗ | '' | 标题栏标题样式 view |
| sureStyle | String | ✗ | '' | 标题栏确定样式 text |
| cancelStyle | String | ✗ | '' | 标题栏取消样式 text |
| chooseItemTextStyle | Array | ✗ | '' | 设置picker列表文案样式 text |
| pickerHeaderStyle | String | ✗ | '' | 标题栏样式 view |
| titleText | String | ✗ | '' | 标题文案 |
| cancelText | String | ✗ | '' | 取消按钮文案 |
| sureText | String | ✗ | '' | 确定按钮文案 |
| bindsure | EventHandle | ✗ | 无 | 点击确定触发的事件，event.detail = value |
| bindcancle | EventHandle | ✗ | 无 | 点击取消触发的事件 |
注意
- 必须在bindsure和bindcancle中将isShowPicker设为false。
- scrollType='normal'时，listData数据结构代码如下；当第二维数组的成员为对象时，需指定用于显示的key(通过keyWordsOfShow属性)，默认为'name'。若要设置默认选中，设置 defaultPickData=[第一选中的列索引,第二选中的列索引,第三选中的列索引,...]，如[1,2,1]
//listData数据结构
[
[对象或者普通类型],
[对象或者普通类型],
[对象或者普通类型],
...
]
- scrollType='link'时，listData数据结构代码如下，"children"字段为必须；'用于显示的key'对应keyWordsOfShow属性。若要设置默认选中，设置 defaultPickData = [{第一列选中项对应的唯一key:value}, {第二列选中项对应的唯一key:value}, {第三列选中项对应的唯一key:value},...]，如[{id:2},{id:21},{id:213}]
//listData数据结构
[
{
用于显示的key:'',
children:[
{
用于显示的key:'',
children:[
{
用于显示的key:'',
children:[
],
其他属性...,
}
],
其他属性...,
},
...
],
其他属性...,
},
...
]
更新日志
- 0.0.1 初始化项目。
