github地址
为什么要自定义picker
原生小程序picker不支持自定义样式,无联动。
该自定组件
支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联自动变化)
使用
直接将picker文件夹拖入工程在某page的json文件中配置{"usingComponents": {"picker": picker.js的相对路径}}
在page的wxml文件中使用
<pickerisShowPicker="{{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
参数说明
注意
必须在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 初始化项目。组件源码和demo请参考github地址