微信小程序自制多列选择器

浅浅的花香味﹌ 2022-12-21 09:28 134阅读 0赞

**原生的不能用 需要自己写 咋写 代码糊呗**

## html部分 ##

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

## js部分data区： ##

//data区：
        multiSelectorData:[
          ['前端开发','Java后台开发'],
          ['原生开发', '全栈开发'],
          ['HTML/HTML5', 'CSS/CSS3', 'JavaScript', 'jQuery','Bootstrap']
        ],
        multiSelectorIndex:[0,0,0],
        multiSelectorValue:'Web技术',

## js部分事件： ##

/** 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('-')
        })
      },

**运行看效果就完事了**

## 思路图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4140d1ddd8464834b92eb17963e0082f.png