小程序 自定义picker组件 picker-view
参考git文档：https://gitee.com/zgp-qz/picker-view-custom-component
使用方法
- 从git上下载下来 放到components下
- json引用
- 使用
通用属性
mode：选择器类型，默认 selector 值：selector - 普通选择器 multiSelector - 多列， cascadeSelector - 级联， time - 时间， date - 日期
cusPickerFlag：控制显隐 默认 false - 隐藏
noText：取消按钮文字，默认 取消
noTextColor：取消按钮文字颜色 默认 #333333
noTextBgColor：取消按钮背景颜色 默认 #f5f5f5
okText：确认按钮文字 默认 确认
okTextColor：确认按钮文字颜色 默认 #FFFFFF
okTextBgColor：确认按钮背景颜色 默认 #ff8833
通用事件
bind:no
描述：取消事件，这里自行控制关闭组件，在组件内部没做，例子里边有
返回值：无bind:ok
描述：确定事件
返回值：Object
obj.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 控制是不是只展示到当前日期，默认 true
fields: 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 ,比如：[2019,9,12] 对应 [年 月 日]bind:ok
描述：确定事件
返回值：Object
obj.els: 对象，els.year,els.month,els.day,
obj.pickerValue: 当前组件选中的数据对应展示的数据列表的下标，在年份里边这个无用
time 时间选择器
step: 用来控制 分钟 间隔，默认间隔 1 分钟
maxHour: 用来控制最大小时 默认 24
minHour: 用来控制最小小时 默认 0
defaultValue：默认值 数组 Array ,比如：[18,30] 对应 [时，分]bind:ok
描述：确定事件
返回值：Object
obj.els: 对象，els.hour,els.minute
obj.pickerValue: 当前组件选中的数据对应展示的数据列表的下标，在时间里边这个无用
具体使用可以下载demo查看
tips：如果要改变值的话还是需要使用wx:if,cusPickerFlag设置后就不能够再进行赋值
小程序 自定义picker组件 picker-view相关推荐
- 微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
- 【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性 共同的属性 时间选择器time 参考 [微信小程序]选择器组件picker picke ...
- 微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信 本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
- 微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 小程序自定义键盘组件之车牌号录入
小程序自定义键盘组件之车牌号录入 效果图: html: <view bindtap="showAddCarNumFun">点击新增车牌号</view>< ...
- 微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
- 微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
- uniapp | 小程序自定义头部组件
前言:在开发小程序的过程中,很经常会遇到各种各样的需求,有些顶部没法很单一的只显示标题和纯色的背景,因此就需要按照项目需求自定义. 思路:先根据设计稿在页面中绘制出结构和样式的内容,接着固定的样式值改 ...
- 微信小程序-自定义导航组件
一.如何自定义组件 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在 ...
- 微信小程序-自定义NavBar组件
组件化 组件化本身是一个可以讲的很大,也可以浓缩为 封装可复用的,模版组件 基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
最新文章
- 算法er的尽头会是To B吗？
- liunx上安装nacos
- 部分 II. Voice over IP
- 如何写windbg高级脚本---以访问文件的windbg脚本为例说明
- Git命令集之八——提交命令
- VTK：vtkArrayToTable用法实战
- Netty方法误解ChannelHandlerContext.writeAndFlush(Object msg)
- MySQL5.7 版本的安装、配置
- 数据加密算法的简介与应用
- Leetcode016 3Sum Closest
- 大白话，讲编程。前端君又回来了！
- Quick cocos2dx学习笔记
- Mr.J-- HTTP学习笔记（六）-- 代理
- 新基建新动力已来，RPA 成为数字化转型新利器！
- 前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)
- 编程语言python入门-编程语言入门(以python为例)
- 股票分时量能分析 概念定义
- 【无标题】段码液晶驱动芯片VK1621S-1资料介绍
- Linux的动态库和静态库
- 4步讲解一维数组传参与二维数组传参