微信小程序picker多列选择器 详解

PS：multiArray：它是一个二维数组，其中有几个元素，证明几列选择器；随着操作的变化，初始化存储每列默认数据，multiArray动态存储当前选定数据对应的数据列。(语言表达能力太差，希望大家能理解结合程序)

multiIndex：一维数组用于存储各列选中值的下标。

以下代码为官方示例，在代码中注释。

wxml页面：

                    {     
      {multiArray[0][multiIndex}，{     
      {multiArray[1][multiIndex[1]}，{     
      {multiArray[2][multiIndex[2]]}}        

js页面：

  /**    * 页面的初始数据    */   data: {     index: 0,     //multiArray二维数组，picker多列选择器只支持二维数组     multiArray: 无脊柱动物， 脊柱动物， 扁性动物， 线形动物， ‘环节动物’， 软体动物， 节肢动物， 猪肉绦虫， 吸血虫，        //multiIndex一维数组，存储每列选定的值下标     //默认值multiIndex: [0, 0, 0]，其中第一个0表示选中multiArray[0][0]‘无脊柱动物’，第二个0表示选择multiArray[1][0]'扁[1][0]multiArray[2]     multiIndex: [0, 0, 0]   },    //bindMultiPickerChange选完数据，点击确定后触发   bindMultiPickerChange: function (e) {     console.log('picker发送选择变化，携带值为‘， e.detail.value)     this.setData({       multiIndex: e.detail.value     })   },   //bindMultiPickerColumnChange 选完一列，在当前列触发一次   bindMultiPickerColumnChange: function (e) {     console.log(修改后列为'， e.detail.column, ， e.detail.value);     var data = {       multiArray: this.data.multiArray,       multiIndex: this.data.multiIndex     };     //e.detail.column  取值范围 0 1 2     ///记录当前选择列值的下标     data.multiIndex[e.detail.column] = e.detail.value;         //根据当前选择的列，当联动更新后两列的值时e.detail.column=3时，在完成上述赋值后，跳过下面switch，     switch (e.detail.column) {       case 0:///当前滑动操作第0列===============         switch (data.multiIndex[0]) {           case 0:///无脊柱动物             data.multiArray[1] = 扁性动物， 线形动物， ‘环节动物’， '软体动物', 节肢动物             data.multiArray[2] = 猪肉绦虫， 吸血虫；             break;           case 1://脊柱动物             data.multiArray[1] = ['鱼', '两栖动物', 爬行动物；             data.multiArray[2] = 鲫鱼， 带鱼；             break;         }         ///后两列默认值为第0元素         data.multiIndex[1] = 0;         data.multiIndex[2] = 0;         break;       case 1:///当前滑动操作第一列===============         switch (data.multiIndex[0]) {           case 0:///无脊柱动物             switch (data.multiIndex[1]) {               case 0:///平形动物                 data.multiArray[2] = 猪肉绦虫， 吸血虫；                 break;               case 1:///线形动物                 data.multiArray[2] = [蛔虫]；                 break;               case 2://链接动物                 data.multiArray[2] = [蚂蚁， 」；                 break;               case 3:///软体动物                 data.multiArray[2] = 河蚌， '蜗牛',                  break;               case 4:                 data.multiArray[2] = 昆虫， 甲壳动物， 蛛形动物， 多足动物；                 break;             }             break;           case 1://脊柱动物             switch (data.multiIndex[1]) {               case 0:                 data.multiArray[2] = 鲫鱼， 带鱼；                 break;               case 1:                 data.multiArray[2] = 青蛙， 娃娃鱼；                 break;               case 2:                 data.multiArray[2] = 蜥蜴， '龟', 壁虎；                 break;             }             break;         }         data.multiIndex[2] = 0;         break;     }     console.log(data.multiIndex);     this.setData(data);   },