小程式 picker 多列選擇器 資料動態獲取

2021-09-08 14:04:32 字數 1491 閱讀 7964

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

校區資料 和 班級資料 分別是兩個介面,以 校區 teach_area_id 字段關聯 其各班級資料

當前選擇:} > } view> picker>

校區api資料格式

"result": [,,

, , , , , ],

1.首先在onload 中請求校區資料並存到全域性變數中

wx.request(,

header: ,

success()); that.setdata() var default_xiaoqu_id = xiaoqulist[0]['teach_area_id'];    //獲取預設的校區對應的 teach_area_id if(default_xiaoqu_id) } })

2.獲取班級資料函式並存到全域性變數中

班級資料格式

"result": [,,

, ]

獲取班級資料函式 searchclassinfo 

searchclassinfo(xiaoqu_id)) var url = 'https://classapi'; util.http(url, ,res =>) classarr.unshift('全部班級');      // 介面中沒有提供全部班級字段,新增之 var xiaoquarr = this.data.xiaoquarr; that.setdata() }) } },

3.預設資料新增之後需要在每次滾動選擇校區分類的時候,請求載入對應班級資料,監聽picker滾動函式

bindmultipickercolumnchange: function(e) ; data.multiindex[e.detail.column] =e.detail.value; var teach_area_id_session = this.data.teach_area_id;    // 保持之前的校區id 與新選擇的id 做對比,如果改變則重新請求資料 switch(e.detail.column)  data.multiindex[1] = 0; break; } this.setdata(data); },

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

由於官方api返回的值是陣列格式,需要做小調整

bindmultipickerchange: function(e) ) } else) } this.setdata() },

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

原創文章

小程式 單列和多列picker選擇器(一)

未選擇時 選擇後 會顯示選擇的內容 附xml和js xml js data bindpickerchangetype function e 先看下這個選擇器的原理,再觸發了繫結事件bindpickerchangetype以後對indextype的值進行了改變,注意此時改變的是value 中的值 也就...

小程式 單列和多列picker選擇器(二)

在我的另一篇博文中已經提到了要解決的第乙個問題 在未選擇時展示引導內容,在下拉欄選擇後顯示選擇內容 現在來解決第二個問題 存入值為文字值而不是角標 當前選擇 可以看出index是下角標,顯示文字時是以陣列的形式,array 0 array 1 等,所以為了讓資料庫中存入的是文字形式我們可以把這部分內...

微信小程式之picker元件(多列選擇器)

1 需求 省市選擇器。原生的省市區 mode region 選擇器只能獲取漢字,不能定製每個省市的id,另外區選擇器實際專案中沒有使用到,思考下後選擇手動修改多列選擇器 mode multiselector 實現功能。實現原理 multiarray是二維陣列,省資料儲存在二維陣列第0個中,市資料切換...