这个功能应该算是基础的了，下面讲讲它的实现：
首先，其实是一个名为picker的组件：
picker（微信官方文档）基础库1.0.0开始支持，低版本需做兼容处理。从底部弹起的滚动选择器。
然后看看我的代码：
这是HTML部分的代码：
viewclass='Select'pickermode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}"range="{{multiArray}}"viewclass="picker"当前选择：{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}/view/picker/viewjs代码：
Page({/页面的初始数据/data:{multiArray:[['2019年','2018年','2017年'],['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']],multiIndex:[0,0]},bindMultiPickerChange:function(e){this.setData({multiIndex:e.detail.value})},bindMultiPickerColumnChange:function(e){vardata={multiArray:this.data.multiArray,multiIndex:this.data.multiIndex};data.multiIndex[e.detail.column]=e.detail.value;this.setData(data);},})css代码：
.Select{text-align:center;margin-top:15rpx;margin-bottom:15rpx;}.c_head{text-align:center;}/pages/home/bills/bills.wxss/.b_head{text-align:center;}.Select{text-align:center;margin-top:15rpx;}.f_tou{display:flex;justify-content:space-around;padding-top:40rpx;}.f_tou_in{height:150rpx;width:150rpx;border-radius:50%;}.f_inf{text-align:center;font-size:33rpx;}.f_each{display:flex;justify-content:space-between;margin-top:30rpx;padding-bottom:30rpx;border-bottom:1rpxrgba(0,0,0,0.171)solid;width:100%;}.f_each_left{margin-left:40rpx;}.f_each_right{margin-right:10rpx;width:100px;}首先看到
multiArray:[['2019年','2018年','2017年'],['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']],表示两栏可供选择，则multiArray里面有两个数组，分别是年份和月份
当前选择：{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}这个是HTML中的代码：multiArray[0][]表示访问年份数组——[‘2019年’,‘2018年’,‘2017年’]multiArray[1][]表示访问月份数组——[‘1月’,‘2月’,·····,‘12月’]
都是用下标访问，这里具体说明：[‘2019年’,‘2018年’,‘2017年’]multiArray[0][0]的数据即表示2019年multiArray[0][1]的数据即表示2018年multiArray[0][2]的数据即表示2017年月份同理~~
初始值，就是页面一打开显示的日期HTML中：
当前选择：{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}js中：
multiIndex:[0,0](检索的初始值)multiArray:[[‘2019年’,‘2018年’,‘2017年’],[‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’]]
multiArray[0][multiIndex[0]]的意思就是multiArray[0][0]，也就是年份数组中的第一个‘2019年’multiArray[1][multiIndex[1]]的意思就是multiArray[1][1]，也就是月份数组中的第一个‘1月’所以一开始显示：当前选择：2019年1月
接下来具体介绍一下pickerpickermode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"来看一下这个picker的属性设置：（1）mode=“multiSelector”表示这是一个多列选择器，具体多少列取决于range的值，相当于一个提供值的库下面是微信官方文档：使用多项选择器的时候是依赖于它的~~这里我们设置
range="{{multiArray}}"multiArray:[['2019年','2018年','2017年'],['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']]唔。。除了选择器的范围，这里还要设置选择器的取值“规则”，也就是value然后我们的代码是：
value="{{multiIndex}}"由于我们的是多项选择器，rang有两栏，所以对应的值value应该是含有两个元素的数组，value主要是用于调用函数的时候返回修改后的值。这里说value的值是number（数字）我个人觉得是不准确的，后面会详细解释
（2）bindchange=“bindMultiPickerChange”这个是选择器的“值”value如果发生变化（即点击确认之后）就调用bindMultiPickerChange函数
bindMultiPickerChange:function(e){this.setData({multiIndex:e.detail.value})}e.detail.value获取了修改后的value，再调用this.setData()就把索引multiIndex的值给更新了，则HTML中的“当前选择”才算更新~~
下面是对参数的一些说明：e是event(这个事件对象)，是一个类(Object)——这些信息在调试界面也有e.detail其实也是一个类(Object)e.detail.value是一个数组(Array)，带有两个元素（其实是数组类，因为你可以看到它还附带了一些其他的信息）因为能够把value的值赋给multiIndex所以它其实也是一个数组类~~
（3）进阶功能——日期的实时更新：如Demo所示:在滚动的同时“当前选择”的日期就发生了改变，关于这个实时更新其实是通过bindcolumnchange=“bindMultiPickerColumnChange”实现的：即每每滚动就会调用这个函数
bindMultiPickerColumnChange:function(e){vardata={multiArray:this.data.multiArray,multiIndex:this.data.multiIndex};data.multiIndex[e.detail.column]=e.detail.value;this.setData(data);}函数的原理是构造一个类data去替换原先picker中的data类下面给出各参数的信息：首先是this.data.multiArray,表示picker(this)的data数据中的multiArray在multiArray类中又有年份类和月份类：Array(3)和Array(12)——提供可选择日期this.data.multiIndex,则是进行日期检索的工具，两个数字分别负责检索年份和月份把两个类封装进新建的data对象接下来是进行信息的实时更新，函数最重要的部分：用e.detail.column获取改变的列数(在我的例子中是第0列或第1列)，column和value只是一个数字。对被修改的那一列的检索进行更新，用e.detail.column即可取到被修改的那一列注意！！这里的value不是数组！！！这是机制的问题，之前的value对应的是multiIndex中两个元素，必须得是数组而这里的value是在bindcolumnchange(列改变就调用)机制下，必定只有一个元素发生改变，没必要返回一个数组，所以，只返回一个数字即可
然后是用新建的data对原this.data进行覆盖（this是可省略的）