微信小程序关于三级联动选择器如何使用

发布日期： 2018-05-19 阅读量： 作者： 网络

本文主要和大家分享了微信小程序三级联动选择器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

效果图

实现原理

利用微信小程序的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>

# 选择器 # 小程序 # 联动

上一篇: textarea中如何解决中英文混合换行问题？

下一篇: dedecms怎么删除会员

微信小程序关于三级联动选择器如何使用

随便看看