微信小程序picker組件兩列關聯使用方式

在使用微信小程序picker組件時候，可以設置屬性   mode = multiSelector   意為多列選擇，關聯選擇，當第一列發生改變時侯，第二列甚至第三列發生相應的改變。但是官方文檔上給的只有三列數據關聯改變，沒有兩列改變得，我在寫的時候琢磨了很久官方文檔，於是寫下此篇文檔，作為總結。

結構文件 

<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 函數，當每一列改變時候都會觸發這個函數，