微信小程序中 picker组件 多列选择器（自定义选择器）实例

在学习微信小程序中发现自定义选择器的联动效果实现起来比较困难，在实际项目中应用还很多，特整理出来帮助实现项目中类似的效果。如下图：

wxml的代码:

<view style="display:flex;">
  <text>请选择您感兴趣的技术：</text>
  <picker 
  mode="multiSelector"
  range="{{multiSelectorData}}"
  value="{{multiSelectorIndex}}"
  bindcolumnchange="columnChange"
  bindchange="multiSelectorChange"
  >{{multiSelectorValue}}</picker>
</view>

js代码：

  data:{
    multiSelectorData:[
      ['前端开发','Java后台开发'],
      ['原生开发', '全栈开发'],
      ['HTML/HTML5', 'CSS/CSS3', 'JavaScript', 'jQuery','Bootstrap']
    ],
    multiSelectorIndex:[0,0,0],
    multiSelectorValue:'Web技术'
  },
  
  /** picker multiSelector 事件 */
  columnChange(e){
    /** 1.准备数据 */
    let column1 ='前端开发、Java后台开发'; /** 第一列数据 */
    let column21 ='原生开发、全栈开发';  /** 第二列数据可选数据 */
    let column22 ='JavaSE、JavaEE、JavaME';
    let column31 ='HTML/HTML5、CSS/CSS3、JavaScript、jQuery、Bootstrap'; /** 第三列数据可选数据 */
    let column32 ='Node.js、Vue.js、微信小程序、uniApp';
    let column33 ='Java基础、Java Web';
    let column34 ='SSH、Servlet';
    let column35 ='移动开发、机顶盒开发、PDA开发';
    /** 2.获取用户选择的数据 */
    let column = e.detail.column;
    let value = e.detail.value;
    /** 3.数据区的multiSelectorData、multiSelectorIndex是动态变量 修改数据区的引用数据类型将其赋给一个临时变量 */
    let tempData = this.data.multiSelectorData;
    let tempIndex = this.data.multiSelectorIndex;
    /** 4.记录用户所选 */
    tempIndex[column]=value;
    /** 5.核心业务逻辑 */
    switch(column){   /** 判断第几列发生变化 */
      case 0:   /** 第一列的值发生变化 */
        switch(value){   /** 判断第一列的值 */
          case 0:
            tempData[1] = column21.split('、');
            tempData[2] = column31.split('、');
            break;
          case 1:
            tempData[1] = column22.split('、');
            tempData[2] = column33.split('、');
            break;
        }
        tempIndex[1]=0;  /** 确保第二列在第一列发生变化后默认选中的是第一个值 */
        tempIndex[2] = 0;  /** 确保第三列在第一列发生变化后默认选中的是第一个值 */
        break;
      case 1:   /** 第二列的值发生变化 */
        if(tempIndex[0]===0 && value===0){  /** 判断第二列的值，同时也要判断第一列的值 */
          tempData[2]=column31.split('、');
        }
        if(tempIndex[0]===0 && value===1){
          tempData[2]=column32.split('、');
        }
        if(tempIndex[0]===1 && value===0){
          tempData[2]=column33.split('、');
        }
        if(tempIndex[0]===1 && value===1){
          tempData[2]=column34.split('、');
        }
        if(tempIndex[0]===1 && value===2){
          tempData[2]=column35.split('、');
        }
        tempIndex[2] = 0;  /** 确保第三列在第二列发生变化后默认选中的是第一个值 */
        break;
    }
    /** 6.将临时变量给回数据区的动态变量 */
    this.setData({
      multiSelectorData:tempData,
      multiSelectorIndex:tempIndex
    })
  },
  multiSelectorChange(e){
    let res=this.data.multiSelectorData.map((item,index)=>{
      return item[e.detail.value[index]];
    })
    this.setData({
      multiSelectorValue:res.join('-')
    })
  }