這個(gè)功能應(yīng)該算是基礎(chǔ)的了，下面講講它的實(shí)現(xiàn)：


首先，其實(shí)是一個(gè)名為 picker 的組件：


picker（微信官方文檔）
基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。
從底部彈起的滾動(dòng)選擇器。


然后看看我的代碼：


這是HTML部分的代碼：


<view class='Select'>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    </view>
  </picker>
</view>
1
2
3
4
5
6
7
js代碼：


Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  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 里面有兩個(gè)數(shù)組，分別是年份和月份


當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
1
這個(gè)是HTML中的代碼：
multiArray[0] [ ] 表示訪問年份數(shù)組——[‘2019年’, ‘2018年’, ‘2017年’]
multiArray[1] [ ] 表示訪問月份數(shù)組——[‘1月’, ‘2月’,·····,‘12月’]




都是用下標(biāo)訪問，這里具體說明：
[‘2019年’, ‘2018年’, ‘2017年’]
multiArray[0] [0] 的數(shù)據(jù)即表示 2019年
multiArray[0] [1] 的數(shù)據(jù)即表示 2018年
multiArray[0] [2] 的數(shù)據(jù)即表示 2017年
月份同理 ~~


初始值，就是頁面一打開顯示的日期


HTML中：


當(dāng)前選擇：{{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]，也就是年份數(shù)組中的第一個(gè) ‘2019年’
multiArray[1][multiIndex[1]] 的意思就是multiArray[1][1]，也就是月份數(shù)組中的第一個(gè) ‘1月’
所以一開始顯示：
當(dāng)前選擇：2019年1月


接下來具體介紹一下picker
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange">
1
來看一下這個(gè)picker 的屬性設(shè)置：
（1）mode=“multiSelector” 表示這是一個(gè)多列選擇器，具體多少列 取決于range 的值，相當(dāng)于一個(gè)提供值的庫
下面是微信官方文檔：


使用多項(xiàng)選擇器的時(shí)候是依賴于它的 ~~
這里我們設(shè)置


range="{{multiArray}}">
multiArray: [['2019年', '2018年', '2017年'], ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']]
1
2
唔。。 除了選擇器的范圍，這里還要設(shè)置選擇器的取值“規(guī)則”，也就是 value


然后我們的代碼是：


value="{{multiIndex}}"
1
由于我們的是多項(xiàng)選擇器，rang有兩欄，所以對(duì)應(yīng)的值 value 應(yīng)該是含有兩個(gè)元素的數(shù)組，value 主要是用于調(diào)用函數(shù)的時(shí)候返回修改后的值。
這里說value 的值是number（數(shù)字）我個(gè)人覺得是不準(zhǔn)確的，后面會(huì)詳細(xì)解釋


（2）bindchange=“bindMultiPickerChange”


這個(gè)是選擇器的“值” value 如果發(fā)生變化（即點(diǎn)擊確認(rèn)之后）就調(diào)用 bindMultiPickerChange 函數(shù)


  bindMultiPickerChange: function (e) {
 this.setData({
   multiIndex: e.detail.value
 })
}
1
2
3
4
5
e.detail.value 獲取了修改后的 value ，再調(diào)用 this.setData()就把索引multiIndex 的值給更新了，則HTML中的 “當(dāng)前選擇” 才算更新 ~~


下面是對(duì)參數(shù)的一些說明：
e 是 event (這個(gè)事件對(duì)象)，是一個(gè)類(Object) ——這些信息在調(diào)試界面也有


e.detail 其實(shí)也是一個(gè)類(Object)


e.detail.value 是一個(gè)數(shù)組(Array)，帶有兩個(gè)元素（其實(shí)是數(shù)組類，因?yàn)槟憧梢钥吹剿€附帶了一些其他的信息）
因?yàn)槟軌虬裿alue的值賦給 multiIndex 所以它其實(shí)也是一個(gè)數(shù)組類 ~~


（3）進(jìn)階功能——日期的實(shí)時(shí)更新：


如 Demo 所示:
在滾動(dòng)的同時(shí) “當(dāng)前選擇” 的日期就發(fā)生了改變，關(guān)于這個(gè)實(shí)時(shí)更新其實(shí)是通過bindcolumnchange=“bindMultiPickerColumnChange” 實(shí)現(xiàn)的：


即每每滾動(dòng)就會(huì)調(diào)用這個(gè)函數(shù)


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
函數(shù)的原理是構(gòu)造一個(gè)類data 去替換原先 picker 中的data 類
下面給出各參數(shù)的信息：
首先是this.data.multiArray , 表示picker(this)的data 數(shù)據(jù)中的 multiArray


在multiArray 類中又有年份類和月份類：Array(3)和Array(12)——提供可選擇日期


this.data.multiIndex , 則是進(jìn)行日期檢索的工具，兩個(gè)數(shù)字分別負(fù)責(zé)檢索年份和月份


把兩個(gè)類封裝進(jìn)新建的data 對(duì)象


接下來是進(jìn)行信息的實(shí)時(shí)更新，函數(shù)最重要的部分：
用e.detail.column 獲取改變的列數(shù) (在我的例子中是第0列或第1列)，column和value只是一個(gè)數(shù)字。


對(duì)被修改的那一列的檢索進(jìn)行更新，用e.detail.column即可取到被修改的那一列


注意??！ 這里的value 不是數(shù)組！??！
這是機(jī)制的問題，之前的value 對(duì)應(yīng)的是multiIndex中兩個(gè)元素，必須得是數(shù)組
而這里的value 是在 bindcolumnchange (列改變就調(diào)用) 機(jī)制下，必定只有一個(gè)元素發(fā)生改變，沒必要返回一個(gè)數(shù)組，所以，只返回一個(gè)數(shù)字即可


然后是用新建的data 對(duì)原this.data 進(jìn)行覆蓋（this 是可省略的）


————————————————
版權(quán)聲明：本文為CSDN博主「嵐月丶」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/a10201516595/article/details/94319861

以上是由福州網(wǎng)站建設(shè)的小編為你分享了"詳解微信小程序picker"文章，如果你在這方面有什么問題，隨時(shí)聯(lián)系我們