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


Posted in Javascript onMay 19, 2020

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

效果图

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

实现原理

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

WXML

<view class="tui-picker-content">
 <view class="tui-picker-name">一级选择实例</view>
 <picker bindchange="changeCountry" value="{{countryIndex}}" range="{{countryList}}">
 <view class="tui-picker-detail">{{countryList[countryIndex]}}</view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">省市区三级联动选择</view>
 <picker bindchange="changeRegin" mode = "region" value="{{region}}">
 <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">自定义二级联动选择</view>
 <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>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">自定义三级联动选择</view>
 <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]]}}
 </view>
 </picker>
</view>

WXSS

page{background-color: #efeff4;}
.tui-picker-content{
 padding: 30rpx;
 text-align: center;
}
.tui-picker-name{
 height: 80rpx;
 line-height: 80rpx;
}
.tui-picker-detail{
 height: 80rpx;
 line-height: 80rpx;
 background-color: #fff;
 font-size: 35rpx;
 padding: 0 10px;
 overflow: hidden;
}

JS

Page({
 data: {
 // 普通选择器列表设置,及初始化
 countryList: ['中国','美国','英国','日本','韩国','巴西','德国'],
 countryIndex: 6,
 // 省市区三级联动初始化
 region: ["四川省", "广元市", "苍溪县"],
 // 多列选择器(二级联动)列表设置,及初始化
 multiArray: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],
 multiIndex: [3,5],
 // 多列选择器(三级联动)列表设置,及初始化
 multiArray3: [[1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 5, 6, 7, 8, 9]],
 multiIndex3: [3, 5, 4]
 },
 // 选择国家函数
 changeCountry(e){
 this.setData({ countryIndex: e.detail.value});
 },
 // 选择省市区函数
 changeRegin(e){
 this.setData({ region: e.detail.value });
 },
 // 选择二级联动
 changeMultiPicker(e) {
 this.setData({multiIndex: e.detail.value})
 },
 // 选择三级联动
 changeMultiPicker3(e) {
 this.setData({ multiIndex3: e.detail.value })
 }
})

总结

1、由于微信小程序的picker组件只提供单独时间选择器和日期选择器,在实际开发中,我们可能需要同时选择日期和时间,组件不够全面,所以在做日期选择器时,需要注意;
2、解决日期和时间选择器结合的方法,利用多列选择器实现;
3、由于多列选择器的数据采用的是二维数组,所以不能直接实现联动效果,需要对数据判断处理。

合理的利用多列选择器,picker组件提供的其他四种选择器都能实现!

DEMO下载

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
使用JS模拟锚点跳转的实例
Feb 01 #Javascript
微信小程序实现图片预览功能
Jan 31 #Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 #Javascript
微信小程序实现MUI数字输入框效果
Jan 31 #Javascript
微信小程序实现折叠面板
Jan 31 #Javascript
Vue中render函数的使用方法
Jan 31 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python实现无证书加密解密实例
2014/10/27 Python
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
房屋维修申请报告
2015/05/18 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis