微信小程序picker多列选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序picker多列选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序 picker 多列选择器

微信官方文档的的案例数据是写死，而且代码阅读性特别差

下面是我参考官方案例写的一个多列选择器，数据是都动态获取的

这是一个二列的选择器，如果需要三列的可以稍加修改一下

一、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

选择器中的数据都是动态获取的，只要将数据转成跟data中的数据格式一样就行了

Page({
  data: {
    multiIndex: [0, 0], // 默认值
    multiArray: [
       ['一年级'， '二年级']， // 年级
       ['1班a'， '2班a'， '3班a'] // 这里对应年级的第一个元素的班级，也就是一年级的班级
    ], 
    classArray: [
       ['1班a'， '2班a'， '3班a']， // 一年级的班级
       ['1班b'， '2班b'， '3班b']  // 二年级的班级
    ]
  },

  // 点击确认时触发
  bindMultiPickerChange(event) {
    this.setData({
      multiIndex: event.detail.value
    })
  },

  // 列改变时触发
  bindMultiPickerColumnChange(event) {
    const data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    }
	  // 获取滚动的是哪一列
    data.multiIndex[event.detail.column] = event.detail.value

    // 遍历 classArray
    this.data.classArray.forEach((item, index) => {
      // 滚动第一列
      if(event.detail.column === 0) {
        // 如果滚动到二年级 则将第二列的班级 替换成二年级对应的班级
        if(data.multiIndex[0] === index) {
          data.multiArray[1] = item
        }
        // 每次滚动 就把第二列默认设置为第一个
        data.multiIndex[1] = 0
      }
      this.setData(data)
    })
  }
})