微信小程序多列選擇器range-key使用詳解
更新時間:2020年03月30日 15:06:22 作者:Rolan
這篇文章主要為大家詳細介紹了微信小程序多列選擇器range-key的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序多列選擇器的具體代碼,供大家參考,具體內(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);
}
})
請記得點贊額?。?!
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個特性,從字面上來看,二者的功能很好理解,分別是"延遲腳本"和"異步腳本"的作用2016-01-01
JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法
這篇文章主要介紹了JS選中checkbox后獲取table內(nèi)一行TD所有數(shù)據(jù)的方法,涉及javascript針對table元素遍歷與獲取的技巧,需要的朋友可以參考下2015-07-07
js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期
有的時候要獲取當(dāng)前日期,或者前一天、后一天的日期,下面這篇文章主要給大家介紹了關(guān)于js根據(jù)當(dāng)前日期獲取前一周或者后一周等日期的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實例形式分析了在不同場合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01

