微信小程序两级联动

先看效果

在这里插入图片描述

数据类型

模拟的数据层级结构

[
    {
        "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的值

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页