微信小程式開發:二級、三級等多級聯動選單
阿新 • • 發佈:2018-11-03
-
二級級聯效果三級聯動效果
-
二級聯動和三級聯動的程式碼結構都是一樣,就看要怎麼設定。接下來上三級聯動的程式碼。
-
wxml
<view class="picker-box"> <view class='skill-picker'> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="skill-title"> {{multiArray[0][multiIndex[0]]}}, {{multiArray[1][multiIndex[1]]}}, {{multiArray[2][multiIndex[2]]}} </view> <image class='drop-down' src='/images/drop_down.png' mode='aspectFit'></image> </picker> </view> </view>
- wxss
.picker-box { margin-top: 0rpx; width: 100%; position: fixed; top: 0; } .skill-picker { height: 80rpx; background-color: rgba(0, 121, 132, 0.8); box-shadow: 0rpx 5rpx 16rpx rgba(0, 0, 0, 0.05); } .skill-title { line-height: 80rpx; text-align: center; vertical-align: middle; color: white; font-size: 36rpx; font-weight: bold; } .drop-down { position: fixed; top: 0; right: 0; margin-top: 18rpx; margin-right: 48rpx; display: inline-block; width: 48rpx; height: 48rpx; vertical-align: middle; }
- js
Page({ data: { index: 0, multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絛蟲', '吸血蟲']], multiIndex: [0, 0, 0] }, bindMultiPickerChange: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列為', e.detail.column, ',值為', e.detail.value); // 知道修改的列以後,就可以通過修改multiIndex中對應元素的值,然後再修改multiArray } })
- 從 三級聯動 修改成 二級聯動,只需要修改multiArray就可以了。會自動根據multiArray中第一個下標的大小來自動進行調整。如multiArray修改成
multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物']],