溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了小程序實現多列選擇器的具體代碼，供大家參考，具體內容如下
代碼分兩部分，先上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，如果還有多，可以依次類推。然后根據需求，依次從中獲取所需的其他數據，完成數據初始化。
然后在滑動多列選擇器的時候，動態更新后一列的數據，我這里做的處理是更新后一列數據，并默認選擇第一個選項。
詳細注釋寫完，發現更多的是配置代碼，具體的功能代碼反而很少。
個人感覺，小程序不是寫代碼，而是在配置選項搭建出來的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
