小程序 picker 多列選擇器 數據動態獲取


需求是將各校區對應各班級的數據 以兩列選擇器的方式展示出來,並且可以在選擇完成之后記錄選結果參數。

校區數據 和 班級數據 分別是兩個接口,以 校區 teach_area_id 字段關聯 其各班級數據

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

 

校區api數據格式

復制代碼
    "result": [
        {
            "teach_area_id": "xxx1",  //值為模擬 加密數據 "teach_area_name": "上海校區" }, { "teach_area_id": "xxx2", "teach_area_name": "無錫校區" }, { "teach_area_id": "xxx3", "teach_area_name": "蘇州校區" }, { "teach_area_id": "xxx4", "teach_area_name": "杭州校區" }, { "teach_area_id": "xxx5", "teach_area_name": "南京校區" }, { "teach_area_id": "xxx6", "teach_area_name": "北京校區" }, { "teach_area_id": "xxx7", "teach_area_name": "廣州校區" }, { "teach_area_id": "xxx", "teach_area_name": "深圳校區" } ],
復制代碼

1.首先在onload 中請求校區數據並存到全局變量中

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

 

2.獲取班級數據函數並存到全局變量中

班級數據格式

復制代碼
"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班" }, ]
復制代碼

 

獲取班級數據函數 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) { console.log('picker發送選擇改變,攜帶值為', 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 代表着選擇的班級對應的 班級id }) } this.setData({ multiIndex: e.detail.value }) },
復制代碼

 

5.之后就可以根據 teach_area_id (校區id) 和 teach_instance_id (班級id)  完成其他業務邏輯

 

原創文章


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM