微信小程序picker

这个功能应该算是基础的了，下面讲讲它的实现：

首先，其实是一个名为 picker 的组件：

picker（微信官方文档）
基础库 1.0.0 开始支持，低版本需做兼容处理。
从底部弹起的滚动选择器。

然后看看我的代码：

这是HTML部分的代码：

<view class='Select'>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    </view>
  </picker>
</view>

js代码：

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) {
    var data = {
      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: 1rpx rgba(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月

接下来具体介绍一下picker

<picker mode="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 所以它其实也是一个数组类 ~~

$分别需要年份和月份，所以需要两个下标，其来源就是e.detail.value这个含两个元素的数组$

（3）进阶功能——日期的实时更新：

如 Demo 所示:
在滚动的同时 “当前选择” 的日期就发生了改变，关于这个实时更新其实是通过bindcolumnchange=“bindMultiPickerColumnChange” 实现的：

即每每滚动就会调用这个函数

bindMultiPickerColumnChange: function (e) {
    var data = {
      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 是可省略的）