微信小程序多列選擇器range-key使用詳解
本文實(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({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { objectMultiArray: [ [ { id: 0, name: '無(wú)脊柱動(dòng)物' }, { id: 1, name: '脊柱動(dòng)物' } ], [ { id: 0, name: '扁性動(dòng)物' }, { id: 1, name: '線形動(dòng)物' }, { id: 2, name: '環(huán)節(jié)動(dòng)物' }, { id: 3, name: '軟體動(dòng)物' }, { id: 3, name: '節(jié)肢動(dòng)物' } ] ], 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: '扁性動(dòng)物' }, { id: 1, name: '線形動(dòng)物' }, { id: 2, name: '環(huán)節(jié)動(dòng)物' }, { id: 3, name: '軟體動(dòng)物' }, { id: 3, name: '節(jié)肢動(dòng)物' } ]; // data.multiArray[2] = ['豬肉絳蟲(chóng)', '吸血蟲(chóng)']; break; case 1: data.objectMultiArray[1] = [ { id: 0, name: '魚(yú)' }, { id: 1, name: '線形兩棲動(dòng)物' }, { id: 2, name: '爬行動(dòng)物' } ]; break; } data.multiIndex2[1] = 0; // data.multiIndex[2] = 0; break; } this.setData(data); } })
請(qǐng)記得點(diǎn)贊額?。?!
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uni-app 組件里面獲取元素寬高的實(shí)現(xiàn)
這篇文章主要介紹了uni-app 組件里面獲取元素寬高的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JS使用new操作符創(chuàng)建對(duì)象的方法分析
這篇文章主要介紹了JS使用new操作符創(chuàng)建對(duì)象的方法,結(jié)合實(shí)例形式分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)類(lèi)的定義、new操作符對(duì)象的創(chuàng)建及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開(kāi)發(fā)者"熟悉而又不熟悉"的兩個(gè)特性,從字面上來(lái)看,二者的功能很好理解,分別是"延遲腳本"和"異步腳本"的作用2016-01-01封裝好的省市地區(qū)聯(lián)動(dòng)控件附下載
封裝好的省市地區(qū)聯(lián)動(dòng)控件附下載...2007-08-08JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對(duì)table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期
有的時(shí)候要獲取當(dāng)前日期,或者前一天、后一天的日期,下面這篇文章主要給大家介紹了關(guān)于js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04JS實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實(shí)例形式分析了在不同場(chǎng)合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01