一、預覽
微信小程序在自帶的表單組件中加入了選擇器picker，并給出了常用的時間和省市區三級聯動選擇器，但日常開發中不可能僅僅使用這些選擇器，所以我們在學習時先寫一個常見的自定義選擇器，用于滿足項目中的日常需要。
先給出效果圖：（先聲明選擇器中數據為測試使用，與真實情況無關）
二、picker屬性
一個簡單地多列選擇器只要給picker組件加屬性mode="multiSelector"即可，綁定數據時使用range來綁定一個數組作為顯示內容，下面是官方給出的屬性解釋。
三、創建組件
我們可以先在.wxml建一個自定義picker組件：
<picker mode="multiSelector" bindchange="bindCustomPickerChange" bindcolumnchange="bindCustomPickerColumnChange" value="{{customIndex}}" range="{{onlyArray}}" > <view> 多列自創選擇器：{{onlyArray[0][customIndex[0]]}}，{{onlyArray[1][customIndex[1]]}}，{{onlyArray[2][customIndex[2]]}} </view></picker>要注意的是，此處的onlyArray數組只是當前顯示內容的數組，并不是我們全部數據的數組。
四、自定義函數
寫好組件，我們就來寫js文件，思路如下：
1.先創建頁面所需數據
Page({ /** * 頁面的初始數據 */ data: { //當前選中數組的下標值 customIndex: [0, 0, 0], //當前選中數組 onlyArray: [ [], [], [] ], //customArray假設為我們從后臺獲取到的json數據 customArray: [{ name: '百度', dept: [{ name: '搜索', product: [{ name: '百度搜索' }, { name: '百度一下' }, ] }, { name: '團購', product: [{ name: '百度糯米' }, { name: '餓了么' }] }, { name: '音樂', product: [{ name: '百度音樂' }] }, { name: '問答社區', product: [{ name: '百度貼吧' }] } ] }, { name: '騰訊', dept: [{ name: '社交', product: [{ name: 'QQ' }, { name: '微信' }, ] }, { name: '視頻', product: [{ name: '騰訊視頻' }, { name: '搜狐視頻' }, ] }, { name: '短視頻', product: [{ name: '微視' }] } ] }, ], },2.加載頁面時給出賦值函數。
可以看到，當前選中數組onlyArray是空的，在小程序顯示時會直接顯示成空，所以需要在頁面創建時給一個初始值，這個初始值使用customIndex數組來給出，也可以用于頁面數據回填。代碼如下：
/** * 生命周期函數--監聽頁面加載 */ onLoad: function(options) { var data = { customArray: this.data.customArray, customIndex: this.data.customIndex, onlyArray: this.data.onlyArray, }; for (var i = 0; i < data.customArray.length; i++) { data.onlyArray[0].push(data.customArray[i].name); } for (var j = 0; j < data.customArray[data.customIndex[0]].dept.length; j++) { data.onlyArray[1].push(data.customArray[data.customIndex[0]].dept[j].name); } for (var k = 0; k < data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product.length; k++) { data.onlyArray[2].push(data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product[k].name); } this.setData(data); },3.創建組件監聽函數。
這里需要兩個函數，分別是bindchange(打開組件后點擊確定觸發)和bindcolumnchange（打開組件后滑動列觸發）。
//多列自定義選擇器改變value的方法 bindCustomPickerChange: function(e) { var customArray = this.data.customArray, customIndex = this.data.customIndex, onlyArray = this.data.onlyArray; console.log('picker發送選擇改變，攜帶值為', e.detail.value); //此處e.detail.value為當前選擇的列的下標值數組，如[0,1,0] console.log('picker最終選擇值為：', onlyArray[0][customIndex[0]], onlyArray[1][customIndex[1]], onlyArray[2][customIndex[2]]); this.setData({ customIndex: e.detail.value }) }, //多列自創選擇器換列方法 bindCustomPickerColumnChange: function(e) { var customArray = this.data.customArray, customIndex = this.data.customIndex, onlyArray = this.data.onlyArray; customIndex[e.detail.column] = e.detail.value; // console.log(onlyArray); var searchColumn = () => { for (var i = 0; i < customArray.length; i++) { var arr1 = []; var arr2 = []; if (i == customIndex[0]) { for (var j = 0; j < customArray[i].dept.length; j++) { arr1.push(customArray[i].dept[j].name); if (j == customIndex[1]) { for (var k = 0; k < customArray[i].dept[j].product.length; k++) { arr2.push(customArray[i].dept[j].product[k].name); } onlyArray[2] = arr2; } } onlyArray[1] = arr1; } }; } switch (e.detail.column) { case 0: customIndex[1] = 0; customIndex[2] = 0; searchColumn(); break; case 1: customIndex[2] = 0; searchColumn(); break; } this.setData({ onlyArray: onlyArray, customIndex: customIndex }); },需要說明的是：
1).bindchange和bindcolumnchange兩個函數都是eventhandle類型的，但他們綁定的數據不同。
2).在bindcolumnchange函數中，進行e.detail.column的判斷，
3).點擊確定后，調用bindchange方法得到選擇結果。我們可以得到的數據包括兩部分，
五、遇到的問題
在這里遇到一個bug，如果在switch語句中將customIndex[0]或customIndex[1]置為0的語句放在searchColumn（）后邊時，數組顯示會混亂，如圖所示：
即第一列換列時，如果第二列數據下標非0，則第三列數據無法對應上。
根據上述bug描述，我猜想可能是在switch判斷中將后列數據下標置為0的操作晚于數組變化的的方法才會導致此問題。
所以后來將customIndex[0]或customIndex[1]置為0的語句放在searchColumn（）前才解決了此問題。
六、總結
此時我們的自定義多列選擇器就建好了，使用json數據作為總數據，可以自定義選項，可以得到想要的兩部分數據，可以數據回填，基本滿足了項目中的實際需要。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
