這個功能應該算是基礎的了，下面講講它的實現：


首先，其實是一個名為 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"文章，如果你在這方面有什么問題，隨時聯系我們