脚本宝典收集整理的这篇文章主要介绍了微信小程序-自定义picker选择器,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
为什么要自定义picker
原生小程序picker不支持自定义样式,无联动。
该自定组件
使用
- 直接将picker文件夹拖入工程
- 在某page的json文件中配置
{
"usingcomponents": {
"picker": picker.js的相对路径
}
}
<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
@L_360_1@
✓
[]
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 初始化项目。
以上是脚本宝典为你收集整理的微信小程序-自定义picker选择器全部内容,希望文章能够帮你解决微信小程序-自定义picker选择器所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。