本文實(shí)例為大家分享了微信小程序多列選擇器的具體代碼,供大家參考,具體內(nèi)容如下
<picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'name'}}"> <view class="picker"> 當(dāng)前選擇:{{objectMultiArray[0][multiIndex2[0]].name}},{{objectMultiArray[1][multiIndex2[1]].name}} </view></picker>Page({ /** * 頁面的初始數(shù)據(jù) */ data: { objectMultiArray: [ [ { id: 0, name: '無脊柱動物' }, { id: 1, name: '脊柱動物' } ], [ { id: 0, name: '扁性動物' }, { id: 1, name: '線形動物' }, { id: 2, name: '環(huán)節(jié)動物' }, { id: 3, name: '軟體動物' }, { id: 3, name: '節(jié)肢動物' } ] ], multiIndex2: [0, 0], }, bindMultiPickerChange2: function (e) { console.log('picker發(fā)送選擇改變,攜帶值為', e.detail.value) this.setData({ multiIndex2: e.detail.value }) }, bindMultiPickerColumnChange2: function (e) { console.log('修改的列為', e.detail.column, ',值為', e.detail.value); var data = { objectMultiArray: this.data.objectMultiArray, multiIndex2: this.data.multiIndex2 }; data.multiIndex2[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: switch (data.multiIndex2[0]) { case 0: data.objectMultiArray[1] = [ { id: 0, name: '扁性動物' }, { id: 1, name: '線形動物' }, { id: 2, name: '環(huán)節(jié)動物' }, { id: 3, name: '軟體動物' }, { id: 3, name: '節(jié)肢動物' } ]; // data.multiArray[2] = ['豬肉絳蟲', '吸血蟲']; break; case 1: data.objectMultiArray[1] = [ { id: 0, name: '魚' }, { id: 1, name: '線形兩棲動物' }, { id: 2, name: '爬行動物' } ]; break; } data.multiIndex2[1] = 0; // data.multiIndex[2] = 0; break; } this.setData(data); }})請記得點(diǎn)贊額?。?!
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答