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


首先，其实是一个名为 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>
1
2
3
4
5
6
7
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);
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
首先看到


multiArray: [['2019年', '2018年', '2017年'], 
['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']],
1
2
表示两栏可供选择，则 multiArray 里面有两个数组，分别是年份和月份


当前选择：{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
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]]}}
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">
1
来看一下这个picker 的属性设置：
（1）mode=“multiSelector” 表示这是一个多列选择器，具体多少列 取决于range 的值，相当于一个提供值的库
下面是微信官方文档：


使用多项选择器的时候是依赖于它的 ~~
这里我们设置


range="{{multiArray}}">
multiArray: [['2019年', '2018年', '2017年'], ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']]
1
2
唔。。 除了选择器的范围，这里还要设置选择器的取值“规则”，也就是 value


然后我们的代码是：


value="{{multiIndex}}"
1
由于我们的是多项选择器，rang有两栏，所以对应的值 value 应该是含有两个元素的数组，value 主要是用于调用函数的时候返回修改后的值。
这里说value 的值是number（数字）我个人觉得是不准确的，后面会详细解释


（2）bindchange=“bindMultiPickerChange”


这个是选择器的“值” value 如果发生变化（即点击确认之后）就调用 bindMultiPickerChange 函数


  bindMultiPickerChange: function (e) {
 this.setData({
   multiIndex: e.detail.value
 })
}
1
2
3
4
5
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) {
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    this.setData(data);
  }
1
2
3
4
5
6
7
8
函数的原理是构造一个类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 是可省略的）


————————————————
版权声明：本文为CSDN博主「岚月丶」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a10201516595/article/details/94319861

以上是由福州网站建设的小编为你分享了"详解微信小程序picker"文章，如果你在这方面有什么问题，随时联系我们