需求是將各校區對應各班級的資料 以兩列選擇器的方式展示出來,並且可以在選擇完成之後記錄選結果引數。
校區資料 和 班級資料 分別是兩個介面,以 校區 teach_area_id 字段關聯 其各班級資料
當前選擇:} > } view> picker>校區api資料格式
"result": [,,1.首先在onload 中請求校區資料並存到全域性變數中, , , , , ],
wx.request(,2.獲取班級資料函式並存到全域性變數中header: ,
success()); that.setdata() var default_xiaoqu_id = xiaoqulist[0]['teach_area_id']; //獲取預設的校區對應的 teach_area_id if(default_xiaoqu_id) } })
班級資料格式
"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個中,市資料切換...