(微信小程序)动态多列选择器

• 需求概述：先选取品类，再根据品类获取品种（每个品类下面有多个品种）
  -

• 以下为示例代码（.详情可参考微信开发文档）

1.wxml:

      <view class="weui-cell__bd">
        <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
          value="{{multiIndex}}" range="{{multiArray}}">
          <view class="weui-select">
            {{multiArray[1][multiIndex[1]]}}
          </view>
        </picker>
      </view>

2.js:

 // 相关数据
  data: {
    multiArray: [],     // picker 数组
    multiIndex: [0, 0], // picker index
    leftArr: [],        // picker 品类
    rightArr: [],       // picker 品种
    lastId: 0           // 选中的品种的id（提交表单时的参数之一）
  },
// 相关函数：
// 1.获取种植品类
  getPinLei: function () {
    var that = this
    wx.request({
      url: baseUrl + '/variety/list',
      data: {
        parentId: 0  // 品种
      },
      success: function (res) {
        var leftArr = res.data.data.map(item => {
          return item.name
        })
        that.setData({
          multiArray: [leftArr, []],
          type01: res.data.data,  // 左侧原始数据
          leftArr: leftArr
        })
        var leftDefaultId = res.data.data[0]['id']
        that.setData({
          parentId: leftDefaultId  // 默认品类的id
        })
        that.getPinZhong()
      }
    })
  },
// 2.获取种植品种
  getPinZhong: function () {
    var that = this
    wx.request({
      url: baseUrl + '/variety/list',
      data: {
        parentId: that.data.parentId  // 品种
      },
      success: function (res) {
        var rightArr = res.data.data.map(item => {
          return item.name
        })
        var leftArr = that.data.leftArr
        that.setData({
          multiArray: [leftArr, rightArr],//picker
          type02: res.data.data, // 右侧原始数据
          rightArr: rightArr,
          lastId: res.data.data[0]['id']
        })
      }
    })
  },
// 3.列表选择滚动
  bindMultiPickerColumnChange: function (e) {
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;

    if (e.detail.column == 0) {
      // 第1列滚动变化
      var leftIndex = e.detail.value
      var leftChangeId = this.data.type01[leftIndex]['id'] // 新的id
      this.setData({
        parentId: leftChangeId
      })
      this.getPinZhong()
      data.multiIndex[1] = 0;
    }
    this.setData(data);
  },
// 4.滚动选择确定
bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value  // 左右变动的id
    })
    var index01 = e.detail.value[1]
    var lastId = this.data.type02[index01]['id']
    // 获取右侧（最终的品种的id）
    this.setData({
      lastId: lastId
    })
  },

3.css:

@import '../../../style/weui@2.3.0.wxss';