快捷導(dǎo)航

微信小程序picker組件兩列關(guān)聯(lián)使用方式

更新時間：2020年10月27日 16:19:50 作者：馬文慶i

這篇文章主要介紹了微信小程序picker組件兩列關(guān)聯(lián)使用方式,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在使用微信小程序picker組件時候，可以設(shè)置屬性 mode = multiSelector 意為多列選擇，關(guān)聯(lián)選擇，當(dāng)?shù)谝涣邪l(fā)生改變時侯，第二列甚至第三列發(fā)生相應(yīng)的改變。但是官方文檔上給的只有三列數(shù)據(jù)關(guān)聯(lián)改變，沒有兩列改變得，我在寫的時候琢磨了很久官方文檔，于是寫下此篇文檔，作為總結(jié)。

結(jié)構(gòu)文件

<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 為每一列改變時候觸發(fā)的函數(shù)，參數(shù)為 e ，

bindchange 為最終選中之后觸發(fā)函數(shù)，參數(shù)為 e，

range 為綁定數(shù)組

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) {
 // 先定義數(shù)據(jù)，數(shù)組里面兩個數(shù)組，意為兩列，當(dāng)?shù)谝涣邪l(fā)生改變時侯，給數(shù)組重新賦值
 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
 })
},

設(shè)計思路

multiArray 為彈出層顯示數(shù)據(jù)，為一個數(shù)組，數(shù)組里面有幾個數(shù)組，就是顯示幾列，我這是兩個數(shù)組，即為顯示兩列，

multiIndex 為最終選中得數(shù)據(jù)索引，是函數(shù) PickerChange 參數(shù) e 里面包含得數(shù)組
　　 e.detail.value 有兩列，即會返回 [1,2] , 前面得 1 表示為，最終選擇第一列得數(shù)組中索引為 1 對應(yīng)的那個值。后邊得 2 表示為，最終選中得為第二列數(shù)據(jù)中索引為 2 對應(yīng)的值

arrColumn0 和 arrColumn1，是我定義得數(shù)組，可以從后臺直接獲取，但是一定要在 picker 組件彈出來之前，附上值。 multiArray 同理也可以這樣賦值。

PickerColumnChange 函數(shù)，當(dāng)每一列改變時候都會觸發(fā)這個函數(shù)，