微信小程序两级联动

Posted 2022-12-09 GW_Cheng

先看效果

数据类型

模拟的数据层级结构

[
    
        "name": "七年级",
        "classes": [
            
                "name": "1班"
            ,
            
                "name": "2班"
            ,
            
                "name": "3班"
            
        ]
    ,
    
        "name": "八年级",
        "classes": [
            
                "name": "1班"
            ,
            
                "name": "2班"
            
        ]
    ,
    
        "name": "九年级",
        "classes": [
            
                "name": "1班"
            ,
            
                "name": "2班"
            ,
            
                "name": "3班"
            ,
            
                "name": "4班"
            
        ]
    
]

data中的数据

  data: 
    rawData: [],
    multiObjArray: [[], []],
    multiIndex: [0, 0]
  ,

页面

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="multiIndex" range="multiObjArray" range-key="'name'">
	<view class="picker">
		<text style="width:180rpx">班级</text>
		multiObjArray[0][multiIndex[0]].name，
		multiObjArray[0][multiIndex[0]].classes[multiIndex[1]].name
	</view>
</picker>

两个主要方法

  bindMultiPickerChange: function (e) 
	    console.log('picker改变，携带值为', e.detail.value)
	    this.setData(
	      multiIndex: e.detail.value
	    )
   ,

  bindMultiPickerColumnChange: function (e) 
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    if (e.detail.column == 0) 
      this.setData(
        'multiObjArray[1]': this.data.rawData[e.detail.value].classes,
      );
    
  ,



 /**
  * 这里主要设置初始化模拟数据，根据实际情况可以用接口返回的数据
  */
onLoad: function (options) 
    let mockJson = [
      
        name: "七年级", classes: [
           name: "1班" ,  name: "2班" ,  name: "3班" 
        ]
      ,
      
        name: "八年级", classes: [
           name: "1班" ,  name: "2班" 
        ]
      ,
      
        name: "九年级", classes: [
           name: "1班" ,  name: "2班" ,  name: "3班" ,  name: "4班" 
        ]
      
    ];
    this.setData(
      rawData: mockJson,
      'multiObjArray[0]': mockJson,
      'multiObjArray[1]': mockJson[0].classes,
    )
  ,

原理

最主要用的是multiObjArray数组和multiIndex下标，multiObjArray记录的是显示的元素数组，第一维是年级信息，第二维是班级信息，第一维数据不需要更新只需要记录选择的位置即可，第二维需要根据第一维的变化进行变化，multiIndex记录的是multiObjArray对应的下标，用来显示和最后提交数据的时候用。

bindMultiPickerColumnChange 方法监听到数据变化是个数组，第一个是列，第二个是行

由于只是两级联动，所以我们只需要关心列的变化即可，当列发生变化的时候从原始数据（原始的对象列表）根据序号找到对应的数据的孩子，赋值到二位数组的第二列。

列变化为1的时候从rawData中找到rawData[1]的classes，赋值给二维数组的第二维

bindMultiPickerChange

当整个picker发生变化的时候重新记录multiIndex的值