本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下
效果图
实现原理
利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例; 2,省市区选择器:mode = region实现省市区三级联动; 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法。
WXML
<view class="tui-picker-content">
<view class="tui-picker-name">省市区三级联动选择
<picker bindchange="changeRegin" mode = "region" value="{{region}}">
<view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}
<view class="tui-picker-content">
<view class="tui-picker-name">自定义二级联动选择
<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 class="tui-picker-content">
<view class="tui-picker-name">自定义三级联动选择
<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]]}}
WXSS
JS
总结
1、由于微信小程序的picker组件只提供单独时间选择器和日期选择器,在实际开发中,我们可能需要同时选择日期和时间,组件不够全面,所以在做日期选择器时,需要注意; 2、解决日期和时间选择器结合的方法,利用多列选择器实现; 3、由于多列选择器的数据采用的是二维数组,所以不能直接实现联动效果,需要对数据判断处理。
合理的利用多列选择器,picker组件提供的其他四种选择器都能实现!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。