object picker 微信小程序_微信小程序-自定义picker选择器

avatar

为什么要自定义picker

原生小程序picker不支持自定义样式，无联动。

该自定组件

支持自定义数据

支持自定义样式

支持传入和返回对象或者基本类型

支持联动(改变父列，子列根据关联自动变化)

使用

直接将picker文件夹拖入工程

在某page的json文件中配置

{

"usingComponents": {

"picker": picker.js的相对路径

}

}

在page的wxml文件中使用

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"

>

更多使用方式，可自行参考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 初始化项目。