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

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

参数说明

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 初始化项目。

组件源码和demo请参考github地址

微信小程序-自定义picker选择器相关推荐

小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联 ...
微信小程序自定义picker多列选择器
需求说明使用 mpvue 实现自定义的 picker 多列选择器. 1.数据结构说明根据 picker 的数据特征,需要构造一个如下所示的数据结构.data数组中的三个元素,分别用于渲染 pick ...
关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序之picker选择器获取值得两种方法
想要实现的效果: 在选择器选择合适的选项后,页面显示所选择的内容第一种方法: //wxml页面 <picker bindchange="PickerChange" valu ...
微信小程序自定义滚动选择器
最近项目里有个需求要做个滚动选择器,在网上找了半天也没找到合适的demo,没办法只能发挥我的聪明才智创造一个,不哔哔上代码. js: // pages/xuanzeqi/xuanzeqi.js Pag ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bind ...
微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）
效果体验二维码(外联图片失效了) 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处 ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...

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

为什么要自定义picker

使用

参数说明

注意

更新日志

微信小程序-自定义picker选择器相关推荐

最新文章

热门文章