Applet picker multi-column selector detailed tutorial

The demand of each class corresponding to the precinct to two data selectors manner displayed, and may be selected from the results of the recording parameters after the selection is completed.

Campus data and class data are two interfaces to its campus teach_area_id field associated data for each class

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
　　<view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
    </view>
</picker>

 

Campus api data format

    "Result": [ 
        { 
            "teach_area_id": "XXX1", // analog value encrypted data 
            "teach_area_name": "Shanghai Campus" 
        }, 
        { 
            "teach_area_id": "XXX2", 
            "teach_area_name": "Wuxi campus" 
        }, 
        { 
            "teach_area_id": "xxx3", 
            "teach_area_name": "Suzhou Campus" 
        }, 
        { 
            "teach_area_id": "xxx4", 
            "teach_area_name": "Hangzhou campus" 
        }, 
        { 
            "teach_area_id": "xxx5 ", 
            " teach_area_name ":" Nanjing campus " 
        }, 
        { 
            "teach_area_id": "xxx6",
            " teach_area_name ":" Beijing Campus "
        },
        {
            "teach_area_id": "xxx7",
            "teach_area_name": "广州校区"
        },
        {
            "teach_area_id": "xxx",
            "teach_area_name": "深圳校区"
        }
    ],

1. First campus data request to the global co-exist onload variable

wx.request ({ 
    URL: 'HTTPS: //api.xxxxxxx', 
    Data: {}, 
    header: { 
      'Content-type': 'file application / JSON' // Default 
    }, 
    Success () { 
      var = RES xiaoquList .data.result; 
      var = xiaoquArr xiaoquList.map (Item => {// this method will district name to distinguish a new array 
        return item.teach_area_name; 
      }); 
      that.setData ({ 
        MultiArray: [xiaoquArr, []] ,　　　　
        xiaoquList, 
        xiaoquArr 
      }) 
      var default_xiaoqu_id xiaoquList = [0] [ 'teach_area_id']; // get the default campus corresponding teach_area_id 
      IF (default_xiaoqu_id) {  
        that.searchClassInfo (default_xiaoqu_id) // if the call to get the corresponding class data is present
      } 
    } 
  })   

 

2. Obtain a function of class data exist to global variables

Class data format

"result": [
        {　　
            "teach_instance_id": "xxx",　　　　//加密数值
            "teach_instance_name": "2级-33期-1班"
        },
        {
            "teach_instance_id": "xxx1",
            "teach_instance_name": "3级-25期-10班"
        },
        {
            "teach_instance_id": "xxx2",
            "teach_instance_name": "3级-25期-9班"
        },
  ]

 

Class data acquisition function searchClassInfo 

searchClassInfo(xiaoqu_id){
    var that = this;
    if (xiaoqu_id) {
      this.setData({
        teach_area_id: xiaoqu_id
      })
      var url = 'https://classapi';
      util.http(url, { teach_area_id: xiaoqu_id},res => {　　　　　　// 此处将请求封装在util.js中
        var classList = res.data.result;
        var classArr = classList.map(item => {
          return item.teach_instance_name;
        })
        classArr.unshift('全部班级');　　　　　　// 接口中没有提供全部班级字段，添加之
        var xiaoquArr = this.data.xiaoquArr;
        that.setData({
          multiArray: [xiaoquArr, classArr],
          classArr,
          classList
        })
      })
      
    }
  },

 

3.默认数据添加之后需要在每次滚动选择校区分类的时候，请求加载对应班级数据，监听picker滚动函数

bindMultiPickerColumnChange: function (e) {
    //e.detail.column 改变的数组下标列, e.detail.value 改变对应列的值
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    var teach_area_id_session = this.data.teach_area_id;　　　　// 保持之前的校区id 与新选择的id 做对比，如果改变则重新请求数据
    switch (e.detail.column) {
      case 0:
        var xiaoquList = this.data.xiaoquList;
        var teach_area_id = xiaoquList[e.detail.value]['teach_area_id'];
        if (teach_area_id_session != teach_area_id) {　　　　// 与之前保持的校区id做对比，如果不一致则重新请求并赋新值
          this.searchClassInfo(teach_area_id);　　　　　　
        }
        data.multiIndex[1] = 0;
        break;
    }
    this.setData(data);
  },

 

4.选择完毕后记录选择的值

由于官方api返回的值是数组格式，需要做小调整

bindMultiPickerChange: function (E) { 
    the console.log ( 'Picker change transmission selected, carrying a value', e.detail.value) 
    var class_key = 0; 
    var = classList this.data.classList; 
    var = e.detail.value select_key [. 1]; 
    var real_key select_key = -. 1; 
    IF (real_key <class_key) { 
      this.setData ({ 
        class_id: 0 
      }) 
    } {the else 
      this.setData ({ 
        class_id: classList [real_key] [ 'teach_instance_id'] // class_id represents a class corresponding to the selected class ID 
      }) 
    } 
    this.setData ({ 
      multiIndex: e.detail.value 
    }) 
  },

 

5. After the business logic can be done in accordance with other teach_area_id (campus id) and teach_instance_id (class id)