picker组件 · 前端菜鸟成长记

[TOC] ## picker组件从**底部弹起**的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器 ***** <br> ### 1.普通选择器(selector) | 属性名 | 类型 | 默认值 | 说明 | 最低版本 | | --- | --- | --- | --- | --- | | **range** | Array / Object Array | \[\] | mode为 selector 或 multiSelector 时，range 有效 | | | **value** | Number | 0 | value 的值表示选择了 range 中的第几个（下标从 0 开始） | | | **bindchange** | EventHandle | | value 改变时触发 change 事件，event.detail = {value: value} | | | disabled | Boolean | false | 是否禁用 | | | bindcancel | EventHandle | | 取消选择或点遮罩层收起 picker 时触发 | | <br> ```    <picker mode = "selector" range="{{arr1}}" value = "{{index}}" bindchange = "fun1"> <button>普通选择器</button>  <view>当前选择的是：{{arr1[index]}}</view> </picker> ``` ``` data: { arr1: ['美国', '中国', '巴西', '日本', '韩国', '巴西', '印度', '泰国'], index:0, }, fun1:function(e){ // picker发送选择改变，携带值为 console.log( e.detail.value) this.setData({ index: e.detail.value }) }, ``` ***** ### 2. 多列选择器(multiSelector) | 属性名 | 类型 | 默认值 | 说明 | 最低版本 | | --- | --- | --- | --- | --- | | **range** | 二维Array / 二维Object Array | \[\] | mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如`[["a","b"], ["c","d"]]` | | | range-key | String | | 当 range 是一个二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | | | **value** | Array | \[\] | value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）。\[0,0\] | | | **bindchange** | EventHandle | | value 改变时触发 change 事件，event.detail = {value: value} | | | **bindcolumnchange** | EventHandle | | 某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标 | | | bindcancel | EventHandle | | 取消选择时触发 | [1.9.90](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | disabled | Boolean | false | 是否禁用 | | <br> ***** <br> ``` <picker mode="multiSelector" range="{{arr2}}" value="{{Dindex}}" bindchange="change2" bindcolumnchange="columnChange"> <button>多列选择器</button> <view> 当前选择：{{arr2[0][Dindex[0]]}}，{{arr2[1][Dindex[1]]}}，{{arr2[2][Dindex[2]]}} </view> </picker> ``` ``` data: { Dindex: [0, 0, 0], arr2: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']], }, /**点击确认时回调 */ change2: function (e) { // picker发送选择改变，携带值为 console.log(e.detail.value) this.setData({ Dindex: e.detail.value }) }, /** 当滚动的时候会回调*/ columnChange: function(e) { // {column:0,value:0} 代表是滚动第0列的第0个值 console.log(e.detail.value) console.log(e.detail.column) } ``` ***** <br> ### 3.时间选择器-（time） | 属性名 | 类型 | 默认值 | 说明 | 最低版本 | | --- | --- | --- | --- | --- | | **value** | String | | 表示**选中**的时间，格式为"hh:mm" | | | **start** | String | | 表示**有效时间范围**的开始，字符串格式为"hh:mm" | | | **end** | String | | 表示**有效时间范围**的结束，字符串格式为"hh:mm" | | | **bindchange** | EventHandle | | value 改变时触发 change 事件，event.detail = {value: value} | | | bindcancel | EventHandle | | 取消选择时触发 | [1.9.90](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | disabled | Boolean | false | 是否禁用 | | ***** <br> ``` <picker mode="time" value="{{time}}" start="09:00" end="21:00" bindchange="bindTimeChange" > <button size='mini' type='primary'>2.时间选择器</button> </picker> ``` ``` data: { time: '12:01', }, bindTimeChange:function(event){ console.log(event.detail) }, ``` ***** <br> ### 4.日期选择器-date ``` <picker mode="date" start="2015-09-01" end="2020-03-16" value="{{data}}" bindchange="change3"> <button>日期选择器</button> <view class="picker"> 当前选择日期为：{{data}} </view> </picker> ``` ``` data: { .... data: '2016-11-22', ``` }, ``` change3: function (e) { // picker发送选择改变，携带值为 console.log(e.detail.value) this.setData({ data: e.detail.value }) }, ``` ***** <br> ### 5. 省市区选择器-region ``` <picker mode="region" bindchange="change4" value="{{region}}" custom-item="{{customItem}}"> <button>省市区选择器</button> <view class="picker"> 当前选择省市区为：{{region}} </view> </picker> ``` ``` data: { .... region: ['广东省', '广州市', '天河区'], customItem: '全部' }, change4: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ region: e.detail.value }) }, ``` ## picker-view >嵌入页面的滚动选择器, 而不是从底部弹出的选择器注意：其中只可放置`<picker-view-column/>`组件，其他节点不会显示。 | value | NumberArray | 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 | \[0,0,0\] | | --- | --- | --- | --- | | **indicator-style** | String | 设置选择器**中间**选中框的**样式** | | | indicator-class | String | 设置选择器**中间**选中框的**类名** | [1.1.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | mask-style | String | 设置蒙层的样式 | [1.5.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | mask-class | String | 设置蒙层的类名 | [1.5.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | **bindchange** | EventHandle | 当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） | | | bindpickstart | EventHandle | 当滚动选择开始时候触发事件 | [2.3.1](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | bindpickend | EventHandle | 当滚动选择结束时候触发事件 |