本文實(shí)例為大家分享了微信小程序三級聯(lián)動(dòng)選擇器的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
實(shí)現(xiàn)原理
利用微信小程序的picker組件，其中：
1，普通選擇器：mode = selector實(shí)現(xiàn)一級選擇實(shí)例；
2，省市區(qū)選擇器：mode = region實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng)；
3， 多列選擇器：mode = multiSelector實(shí)現(xiàn)二級和三級聯(lián)動(dòng)的10以內(nèi)數(shù)字的乘法。
WXML
<view class="tui-picker-content"> <view class="tui-picker-name">一級選擇實(shí)例</view> <picker bindchange="changeCountry" value="{{countryIndex}}" range="{{countryList}}"> <view class="tui-picker-detail">{{countryList[countryIndex]}}</view> </picker></view><view class="tui-picker-content"> <view class="tui-picker-name">省市區(qū)三級聯(lián)動(dòng)選擇</view> <picker bindchange="changeRegin" mode = "region" value="{{region}}"> <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view> </picker></view><view class="tui-picker-content"> <view class="tui-picker-name">自定義二級聯(lián)動(dòng)選擇</view> <picker bindchange="changeMultiPicker" mode = "multiSelector" value="{{multiIndex}}" range="{{multiArray}}"> <view class="tui-picker-detail"> {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}} </view> </picker></view><view class="tui-picker-content"> <view class="tui-picker-name">自定義三級聯(lián)動(dòng)選擇</view> <picker bindchange="changeMultiPicker3" mode = "multiSelector" value="{{multiIndex3}}" range="{{multiArray3}}"> <view class="tui-picker-detail"> {{multiArray3[0][multiIndex3[0]]}} * {{multiArray3[1][multiIndex3[1]]}} * {{multiArray3[2][multiIndex3[2]]}} = {{multiArray3[0][multiIndex3[0]] * multiArray3[1][multiIndex3[1]] * multiArray3[2][multiIndex3[2]]}} </view> </picker></view>WXSS
page{background-color: #efeff4;}.tui-picker-content{ padding: 30rpx; text-align: center;}.tui-picker-name{ height: 80rpx; line-height: 80rpx;}.tui-picker-detail{ height: 80rpx; line-height: 80rpx; background-color: #fff; font-size: 35rpx; padding: 0 10px; overflow: hidden;}JS
Page({ data: { // 普通選擇器列表設(shè)置,及初始化 countryList: ['中國','美國','英國','日本','韓國','巴西','德國'], countryIndex: 6, // 省市區(qū)三級聯(lián)動(dòng)初始化 region: ["四川省", "廣元市", "蒼溪縣"], // 多列選擇器(二級聯(lián)動(dòng))列表設(shè)置,及初始化 multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex: [3,5], // 多列選擇器(三級聯(lián)動(dòng))列表設(shè)置,及初始化 multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]], multiIndex3: [3, 5, 4] }, // 選擇國家函數(shù) changeCountry(e){ this.setData({ countryIndex: e.detail.value}); }, // 選擇省市區(qū)函數(shù) changeRegin(e){ this.setData({ region: e.detail.value }); }, // 選擇二級聯(lián)動(dòng) changeMultiPicker(e) { this.setData({multiIndex: e.detail.value}) }, // 選擇三級聯(lián)動(dòng) changeMultiPicker3(e) { this.setData({ multiIndex3: e.detail.value }) }})總結(jié)
1、由于微信小程序的picker組件只提供單獨(dú)時(shí)間選擇器和日期選擇器，在實(shí)際開發(fā)中，我們可能需要同時(shí)選擇日期和時(shí)間，組件不夠全面，所以在做日期選擇器時(shí)，需要注意；
2、解決日期和時(shí)間選擇器結(jié)合的方法，利用多列選擇器實(shí)現(xiàn)；
3、由于多列選擇器的數(shù)據(jù)采用的是二維數(shù)組，所以不能直接實(shí)現(xiàn)聯(lián)動(dòng)效果，需要對數(shù)據(jù)判斷處理。
合理的利用多列選擇器，picker組件提供的其他四種選擇器都能實(shí)現(xiàn)！
DEMO下載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
