微信小程序 picker 多列選擇器

微信官方文檔的的案例數(shù)據(jù)是寫死，而且代碼閱讀性特別差

下面是我參考官方案例寫的一個(gè)多列選擇器，數(shù)據(jù)是都動(dòng)態(tài)獲取的

這是一個(gè)二列的選擇器，如果需要三列的可以稍加修改一下

一、wxml

<picker 
	mode="multiSelector" 
    bindchange="bindMultiPickerChange" 
    bindcolumnchange="bindMultiPickerColumnChange" 
    value="{{multiIndex}}" 
    range="{{multiArray}}"
 >
    <view class="picker">
    	請選擇：{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    </view>
</picker>

二、js

選擇器中的數(shù)據(jù)都是動(dòng)態(tài)獲取的，只要將數(shù)據(jù)轉(zhuǎn)成跟data中的數(shù)據(jù)格式一樣就行了

Page({
  data: {
    multiIndex: [0, 0], // 默認(rèn)值
    multiArray: [
       ['一年級'， '二年級']， // 年級
       ['1班a'， '2班a'， '3班a'] // 這里對應(yīng)年級的第一個(gè)元素的班級，也就是一年級的班級
    ], 
    classArray: [
       ['1班a'， '2班a'， '3班a']， // 一年級的班級
       ['1班b'， '2班b'， '3班b']  // 二年級的班級
    ]
  },

  // 點(diǎn)擊確認(rèn)時(shí)觸發(fā)
  bindMultiPickerChange(event) {
    this.setData({
      multiIndex: event.detail.value
    })
  },

  // 列改變時(shí)觸發(fā)
  bindMultiPickerColumnChange(event) {
    const data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    }
	  // 獲取滾動(dòng)的是哪一列
    data.multiIndex[event.detail.column] = event.detail.value

    // 遍歷 classArray
    this.data.classArray.forEach((item, index) => {
      // 滾動(dòng)第一列
      if(event.detail.column === 0) {
        // 如果滾動(dòng)到二年級 則將第二列的班級 替換成二年級對應(yīng)的班級
        if(data.multiIndex[0] === index) {
          data.multiArray[1] = item
        }
        // 每次滾動(dòng) 就把第二列默認(rèn)設(shè)置為第一個(gè)
        data.multiIndex[1] = 0
      }
      this.setData(data)
    })
  }
})

參考文檔

picker 組件

如果該文章能幫到你的話 麻煩點(diǎn)個(gè)贊 謝謝啦~文章來源地址http://www.zghlxwxcb.cn/news/detail-511582.html

到了這里，關(guān)于微信小程序picker多列選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！