本文實例為大家分享了小程序實現多列選擇器的具體代碼，供大家參考，具體內容如下
代碼分兩部分，先上wxml
<view class="container"> <form catchsubmit="formSubmit"> <view class="form-card"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">物種<span>*</span></view> </view> <view class="weui-cell__bd"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="weui-input">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}</view> </picker> </view> </view> </view> </form> </view>其次是js
Page({ /** * 頁面的初始數據 */ data: { objectMultiShow: [], objectMultiArray: [], multiArray: [], multiIndex: [], checkeIndex: [] }, /** * 生命周期函數--監聽頁面加載 * objectMultiShow--匹配多列選擇器渲染數據所對應的json數據（包含id，parentId，name） * multiArray--多列選擇器渲染數據 */ onLoad: function (options) { // 初始化 let data = { objectMultiShow: this.data.objectMultiShow, objectMultiArray: this.data.objectMultiArray, multiArray: this.data.multiArray, multiIndex: this.data.multiIndex, checkeIndex: this.data.checkeIndex } data.objectMultiArray = [ [{ id: 0, name: '無脊柱動物' }, { id: 1, name: '脊柱動物' }], [ { id: 0, name: '扁性動物', parentId: 0 }, { id: 1, name: '線形動物', parentId: 0 }, { id: 2, name: '環節動物', parentId: 0 }, { id: 3, name: '軟體動物', parentId: 0 }, { id: 4, name: '節肢動物', parentId: 0 }, { id: 5, name: '魚', parentId: 1 }, { id: 6, name: '兩棲動物', parentId: 1 }, { id: 7, name: '爬行動物', parentId: 1 } ], [ { id: 0, name: '豬肉絳蟲', parentId: 0 }, { id: 1, name: '吸血蟲', parentId: 0 }, { id: 2, name: '蛔蟲', parentId: 1 }, { id: 3, name: '螞蟻', parentId: 2 }, { id: 4, name: '螞蟥', parentId: 2 }, { id: 5, name: '河蚌', parentId: 3 }, { id: 6, name: '蝸牛', parentId: 3 }, { id: 7, name: '蛞蝓', parentId: 3 }, { id: 8, name: '昆蟲', parentId: 4 }, { id: 9, name: '甲殼動物', parentId: 4 }, { id: 10, name: '蛛形動物', parentId: 4 }, { id: 11, name: '多足動物', parentId: 4 }, { id: 3, name: '鯽魚', parentId: 5 }, { id: 4, name: '帶魚', parentId: 5 }, { id: 3, name: '青蛙', parentId: 6 }, { id: 4, name: '娃娃魚', parentId: 6 }, { id: 3, name: '蜥蜴', parentId: 7 }, { id: 4, name: '龜', parentId: 7 }, { id: 4, name: '壁虎', parentId: 7 }, ] ] data.objectMultiShow = data.objectMultiArray.map((item, index) => { if (index > 0) { item = item.filter(i => i.parentId === data.objectMultiArray[index - 1][0].id) } return item }) data.multiArray = data.objectMultiShow.map(item => { item = item.map(i => i.name) return item }) console.log(data.multiIndex) // 數據更新 this.setData(data) }, bindMultiPickerChange: function (e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列為', e.detail.column, '，值為', e.detail.value); // 初始化數據 var data = { objectMultiShow: this.data.objectMultiShow, multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; // 改變第i列數據之后，后幾列選擇第0個選項（重置） data.multiIndex[e.detail.column] = e.detail.value; for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) { data.multiIndex[i + 1] = 0 } /** * 改變第i列數據之后，后幾列數據更新 * 兩種寫法：for 和 switch，switch為三列選擇器寫法，for由switch精簡拓展過來，可用于多列選擇器 * swich寫法：如果更改的是第一列數據，第二列數據通過filter篩選（parentId = 第一列選中項id），同時更新第三列數據 * 如果更改的是第二列數據，更新第三列數據 通過filter篩選（parentId = 第二列選中項id） */ let arry = this.data.objectMultiArray for (let i = e.detail.column; i < data.multiIndex.length - 1; i++) { data.objectMultiShow[i + 1] = arry[i + 1].filter(item => item.parentId === data.objectMultiShow[i][data.multiIndex[i]].id) data.multiArray[i + 1] = data.objectMultiShow[i + 1].map(item => item.name) } /*switch (e.detail.column) { case 0: data.objectMultiShow[1] = arry[1].filter(item => item.parentId === data.objectMultiShow[0][data.multiIndex[0]].id) data.multiArray[1] = data.objectMultiShow[1].map(item => item.name) data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id) data.multiArray[2] = data.objectMultiShow[2].map(item => item.name) break; case 1: data.objectMultiShow[2] = arry[2].filter(item => item.parentId === data.objectMultiShow[1][data.multiIndex[1]].id) data.multiArray[2] = data.objectMultiShow[2].map(item => item.name) }*/ // 數據更新 this.setData(data); }})wxml部分選用的官方組件--picker，根據官方文檔mode=multiSelector，表示使用多列選擇器。
其他參數容我吐槽下：首先是range--綁定的二維數據，只能是字符串組成的二維數組，比如[["a","b"], ["c","d"]]，這樣的話多列選擇器就是第一列a，b選項，第二列c，d選項。感覺很美。然而事實上這能干啥捏？我們做的多列選擇器并不是只是頁面展示，要跟后臺對接數據的，就這樣傳字符串合適否？我需要的是帶id之類的對象，而wxml頁面又不支持雙括號綁定數據里寫map之類的函數方法。所以，我們后臺傳過來的數據要改造一下，提取其中的name為綁定數據。
第二個就是value，本來以為這個是對應項中的第幾個是這樣的：a如果對應c，b如果對應d。選擇bd應該就是[1, 1]，而事實上是[1, 0]。也就是對應頁面上展示的第幾個對應（bd,頁面上第一列有ab兩個選項，第二列有且只有一個d）
其他關于bindchange綁定的方法是點擊確認按鈕觸發，bindcolumnchange綁定的方法是滑動多列選擇器時候觸發，至于bindcancel綁定感覺就是笑話，數據實時改變，取消需要再綁定一個中間值才能達到該有的效果，這里暫時沒有做。
js部分我使用了五個數據
為了達到我想到的真正的多列效果，我不惜出賣肉體，跟后臺大哥達成的各種屈辱協議，獲得了想要的數據格式第一列數組不帶parentId，因為沒有parent。第二列parentId對應第一列id，第三列parentId對應第二列id，如果還有多，可以依次類推。然后根據需求，依次從中獲取所需的其他數據，完成數據初始化。
然后在滑動多列選擇器的時候，動態更新后一列的數據，我這里做的處理是更新后一列數據，并默認選擇第一個選項。
詳細注釋寫完，發現更多的是配置代碼，具體的功能代碼反而很少。
個人感覺，小程序不是寫代碼，而是在配置選項搭建出來的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
