⼩程序-⾃定义picker选择器
为什么要⾃定义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作为对象的
keyWordsOfShow String✗'name'当listData的的每⼀个成员，是由对象组成的数组时，keyWordsOfShow作为对象的key，其value⽤于显⽰；或者当picker='link'时，供显⽰的key
defaultPickData Array✗[]设置picker默认选择
indicatorStyle String✗''设置选择器中间选中框的样式（详见）如，每⼀⾏的⾼度 view
maskStyle String✗''设置蒙层的样式（详见） 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✗⽆点击取消触发的事件
name type required default Description
注意
必须在bindsure和bindcancle中将isShowPicker设为false。
scrollType='normal'时，listData数据结构代码如下；当第⼆维数组的成员为对象时，需指定⽤于显⽰的key(通过keyWordsOfShow 属性)，默认为'name'。若要设置默认选中，设置 defaultPickData=[第⼀选中的列索引，第⼆选中的列索引，第三选中的列索引,...]，如[1,2,1]
//listData数据结构
[
[对象或者普通类型],textstyle
[对象或者普通类型],
[对象或者普通类型],
...
]
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 初始化项⽬。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。