溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關微信小程序picker組件兩列關聯的使用方法，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
結構文件
<picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="PickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
</view>
</picker>bindcolumnchange 為每一列改變時候觸發的函數，參數為 e ，
bindchange 為最終選中之后觸發函數，參數為 e，
range 為綁定數組
js文件
data: {
multiArray: [['飛禽', '走獸'], ['鷹', '鴿子', '麻雀', '鸚鵡']],
multiIndex: [0, 0],
arrColumn0: ['鷹', '鴿子', '麻雀', '鸚鵡'],
arrColumn1: ['兔子', '獅子', '獵狗']
},
PickerChange(e) {
var value = e.detail.value
this.setData({
multiIndex: value
})
console.log(this.data.multiArray[0][value[0]], this.data.multiArray[1][value[1]])
},
PickerColumnChange(e) {
// 先定義數據，數組里面兩個數組，意為兩列，當第一列發生改變時侯，給數組重新賦值
var obj = e.detail
var multiArray = this.data.multiArray
if (obj.column == 0 && obj.value == 0) {
multiArray[1] = this.data.arrColumn0
}
if (obj.column == 0 && obj.value == 1) {
multiArray[1] = this.data.arrColumn1
}
this.setData({
multiArray: multiArray
})
},設計思路
multiArray 為彈出層顯示數據，為一個數組，數組里面有幾個數組，就是顯示幾列，我這是兩個數組，即為顯示兩列，
multiIndex 為最終選中得數據索引，是函數 PickerChange 參數 e 里面包含得數組
e.detail.value 有兩列，即會返回 [1,2] , 前面得 1 表示為，最終選擇第一列得數組中索引為 1 對應的那個值。后邊得 2 表示為，最終選中得為第二列數據中索引為 2 對應的值
arrColumn0 和 arrColumn1，是我定義得數組，可以從后臺直接獲取，但是一定要在 picker 組件彈出來之前，附上值。 multiArray 同理也可以這樣賦值。
PickerColumnChange 函數，當每一列改變時候都會觸發這個函數，
關于微信小程序picker組件兩列關聯的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
