這個功能應該算是基礎的了，下面講講它的實現：
首先，其實是一個名為 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"文章，如果你在這方面有什么問題，隨時聯系我們
微信便捷交流