1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 小程序 自定义picker组件 picker-view

小程序 自定义picker组件 picker-view

时间:2023-02-01 12:52:45

相关推荐

小程序 自定义picker组件 picker-view

参考git文档:/zgp-qz/picker-view-custom-component

使用方法

从git上下载下来 放到components下json引用使用

通用属性

mode:选择器类型,默认 selector 值:selector - 普通选择器 multiSelector - 多列, cascadeSelector - 级联, time - 时间, date - 日期 cusPickerFlag:控制显隐 默认 false - 隐藏noText:取消按钮文字,默认 取消noTextColor:取消按钮文字颜色 默认 #333333noTextBgColor:取消按钮背景颜色 默认 #f5f5f5okText:确认按钮文字 默认 确认okTextColor:确认按钮文字颜色 默认 #FFFFFFokTextBgColor:确认按钮背景颜色 默认 #ff8833

通用事件

bind:no描述:取消事件,这里自行控制关闭组件,在组件内部没做,例子里边有返回值:无bind:ok描述:确定事件返回值:Objectobj.els: 当前整个选中的元素对象,传递的东西没有做任何处理,直接返回,需要什么自己拿obj.pickerValue: 当前组件选中的数据对应展示的数据列表的下标,如果需要,自行拿走不谢

类型介绍

selector 普通选择器

list: 选项数组类型:Array例子:[{label:'***',other:...},{label:'***',other:...},...]defaultValue: 默认值 类型:Array例子:[ 0, 0, ...],数组默认值对应的下标,不是 ID 等标志

multiSelector 多列选择器

list: 选项数组类型:Array例子:[[{label:'***',other:...},{label:'***',other:...},...],[{label:'***',other:...},{label:'***',other:...},...]]defaultValue: 默认值 类型:Array例子:[ 0, 0, ...],数组默认值对应的下标,不是 ID 等标志

cascadeSelector 级联选择器 可以是二级、三级联动,现在最多三级联动,因为本地模拟的四级联动的数据的时候,微信小程序死活展示不出来第四级,可能也是性能上的原因或者其他原因吧,暂时适合二三级联动

list: 选项数组类型:Array例子:[{label:'***',other:...,children:[{label:'***',other:...,children:[{label:'***',other:...,children:[]},{label:'***',other:...,children:[]},...]},{label:'***',other:...,children:[{label:'***',other:...,children:[]},{label:'***',other:...,children:[]},...]},...]},{label:'***',other:...,children:[{label:'***',other:...,children:[{label:'***',other:...,children:[]},{label:'***',other:...,children:[]},...]},{label:'***',other:...,children:[{label:'***',other:...,children:[]},{label:'***',other:...,children:[]},...]},...]},...]defaultValue: 默认值 类型:Array例子:[ 0, 0, ...],数组默认值对应的下标,不是 ID 等标志, 0 对应的元素是 父级 list 对应的下标,1 对应的元素是 父级的子级 children 对应的下标,2 对应的元素是 父级的子级(children)的子级(children) 对应的下标点击确定的时候会返回给你

date 日期选择器

nowFlag: Boolean 控制是不是只展示到当前日期,默认 truefields: String 粒度,默认 day ;day - 年月日,month - 年月 , year - 年startTime: Array 开始时间,默认 [] 例如: [1992,2,24] [年,月,日]endTime: Array 开始时间,默认 [] 例如: [2028,2,24] [年,月,日] nowFlag 为 true 的时候 endTime 不起作用yearBefore: Number 控制展示当前年份往前数多少年 默认 60 startTime 有值它就不起作用yearAfter: Number 控制展示当前年份往后数多少年 默认 60,如果 nowFlag 为 true, yearAfter 将不起作用 endTime 有值它就不起作用defaultValue:默认值 数组 Array ,比如:[,9,12] 对应 [年 月 日]bind:ok描述:确定事件返回值:Objectobj.els: 对象,els.year,els.month,els.day,obj.pickerValue: 当前组件选中的数据对应展示的数据列表的下标,在年份里边这个无用

time 时间选择器

step: 用来控制 分钟 间隔,默认间隔 1 分钟maxHour: 用来控制最大小时 默认 24minHour: 用来控制最小小时 默认 0defaultValue:默认值 数组 Array ,比如:[18,30] 对应 [时,分]bind:ok描述:确定事件返回值:Objectobj.els: 对象,els.hour,els.minuteobj.pickerValue: 当前组件选中的数据对应展示的数据列表的下标,在时间里边这个无用

具体使用可以下载demo查看

tips:如果要改变值的话还是需要使用wx:if,cusPickerFlag设置后就不能够再进行赋值

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。