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

發(fā)布時間：2020-10-28 14:53:16 來源：億速云閱讀：428 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序picker組件兩列關(guān)聯(lián)的使用方法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

結(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è)計(jì)思路

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ù)，

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

關(guān)于微信小程序picker組件兩列關(guān)聯(lián)的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽