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


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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
重置版游戏视频
2020/04/09 魔兽争霸
安装APACHE
2007/01/15 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
javascript call方法使用说明
2010/01/11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python实现简单登陆系统
2018/10/18 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python实现宿舍管理系统
2019/11/22 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
同事打架检讨书
2014/02/04 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
村委会换届选举方案
2014/05/03 职场文书
政治思想表现评语
2014/05/04 职场文书
开发房地产协议书
2014/09/14 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
求职自我评价怎么写
2015/03/09 职场文书
公司捐书倡议书
2015/04/27 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
理解深度学习之深度学习简介
2021/04/14 Python