微信小程序三级联动选择器的使用方法

这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序三级联动选择器的具体代码，供大家参考，具体内容如下

效果图

实现原理

利用微信小程序的picker组件，其中：
1，普通选择器：mode = selector实现一级选择实例；
2，省市区选择器：mode = region实现省市区三级联动；
3， 多列选择器：mode = multiSelector实现二级和三级联动的10以内数字的乘法。

WXML

<view>
 <view>一级选择实例</view>
 <picker>
 <view>{{countryList[countryIndex]}}</view>
 </picker></view><view>
 <view>省市区三级联动选择</view>
 <picker>
 <view>{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
 </picker></view><view>
 <view>自定义二级联动选择</view>
 <picker>
 <view>
 {{multiArray[0][multiIndex[0]]}} * {{multiArray[1][multiIndex[1]]}} = {{multiArray[0][multiIndex[0]] * multiArray[1][multiIndex[1]]}}
 </view>
 </picker></view><view>
 <view>自定义三级联动选择</view>
 <picker>
 <view>
 {{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>