微信小程序开发：二级、三级等多级联动菜单

二级级联效果三级联动效果

二级联动和三级联动的代码结构都是一样，就看要怎么设置。接下来上三级联动的代码。

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>

.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; }

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 } })