微信小程序 picker 多列選擇器省市數(shù)據(jù)動態(tài)獲取

發(fā)布日期：2019-10-02瀏覽次數(shù)：1923 來源：福州網(wǎng)站建設(shè)

需求是將各校區(qū)對應(yīng)各班級的數(shù)據(jù) 以兩列選擇器的方式展示出來，并且可以在選擇完成之后記錄選結(jié)果參數(shù)。

校區(qū)數(shù)據(jù) 和班級數(shù)據(jù) 分別是兩個接口，以校區(qū) teach_area_id 字段關(guān)聯(lián) 其各班級數(shù)據(jù)

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

校區(qū)api數(shù)據(jù)格式

    "result": [
        { "teach_area_id": "xxx1",　　//值為模擬 加密數(shù)據(jù) "teach_area_name": "上海校區(qū)" },
        { "teach_area_id": "xxx2", "teach_area_name": "無錫校區(qū)" },
        { "teach_area_id": "xxx3", "teach_area_name": "蘇州校區(qū)" },
        { "teach_area_id": "xxx4", "teach_area_name": "杭州校區(qū)" },
        { "teach_area_id": "xxx5", "teach_area_name": "南京校區(qū)" },
        { "teach_area_id": "xxx6", "teach_area_name": "北京校區(qū)" },
        { "teach_area_id": "xxx7", "teach_area_name": "廣州校區(qū)" },
        { "teach_area_id": "xxx", "teach_area_name": "深圳校區(qū)" }
    ],

1.首先在onload 中請求校區(qū)數(shù)據(jù)并存到全局變量中

wx.request({
    url:'https://api.xxxxxxx',
    data: {},
    header: { 'content-type': 'application/json' // 默認值  },
    success(){ var xiaoquList = res.data.result; var xiaoquArr = xiaoquList.map(item => {　　　　// 此方法將校區(qū)名稱區(qū)分到一個新數(shù)組中 return item.teach_area_name;
      });
      that.setData({
        multiArray: [xiaoquArr, []],　　　　
        xiaoquList,
        xiaoquArr
      }) var default_xiaoqu_id = xiaoquList[0]['teach_area_id'];　　　　//獲取默認的校區(qū)對應(yīng)的 teach_area_id if (default_xiaoqu_id) {
        that.searchClassInfo(default_xiaoqu_id)　　　　　　// 如果存在調(diào)用獲取對應(yīng)的班級數(shù)據(jù)
      }
    }
  })

2.獲取班級數(shù)據(jù)函數(shù)并存到全局變量中

班級數(shù)據(jù)格式

"result": [
        {　　 "teach_instance_id": "xxx",　　　　//加密數(shù)值 "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班" },
  ]

獲取班級數(shù)據(jù)函數(shù) 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.默認數(shù)據(jù)添加之后需要在每次滾動選擇校區(qū)分類的時候，請求加載對應(yīng)班級數(shù)據(jù)，監(jiān)聽picker滾動函數(shù)

bindMultiPickerColumnChange: function (e) { //e.detail.column 改變的數(shù)組下標列, e.detail.value 改變對應(yīng)列的值 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;　　　　// 保持之前的校區(qū)id 與新選擇的id 做對比，如果改變則重新請求數(shù)據(jù) 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) {　　　　// 與之前保持的校區(qū)id做對比，如果不一致則重新請求并賦新值 this.searchClassInfo(teach_area_id);　　　　　　
        }
        data.multiIndex[1] = 0; break;
    } this.setData(data);
  },

4.選擇完畢后記錄選擇的值

由于官方api返回的值是數(shù)組格式，需要做小調(diào)整

bindMultiPickerChange: function (e) {
    console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value) var class_key = 0; var classList =this.data.classList; var select_key = e.detail.value[1]; var real_key = select_key - 1; if (real_key < class_key) { this.setData({
        class_id: 0 })
    } else { this.setData({
        class_id: classList[real_key]['teach_instance_id']　　　　　　// class_id 代表著選擇的班級對應(yīng)的 班級id
      })
    } this.setData({
      multiIndex: e.detail.value
    })
  },