微信小程序picker组件两列关联使用方式


Posted in Javascript onOctober 27, 2020

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变。但是官方文档上给的只有三列数据关联改变,没有两列改变得,我在写的时候琢磨了很久官方文档,于是写下此篇文档,作为总结。

结构文件

<picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="PickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
 {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
 </view>
</picker>

bindcolumnchange 为每一列改变时候触发的函数,参数为 e ,

bindchange 为最终选中之后触发函数,参数为 e,

range 为绑定数组

js文件

data: {
 multiArray: [['飞禽', '走兽'], ['鹰', '鸽子', '麻雀', '鹦鹉']],
 multiIndex: [0, 0],
 arrColumn0: ['鹰', '鸽子', '麻雀', '鹦鹉'],
 arrColumn1: ['兔子', '狮子', '猎狗']
},
PickerChange(e) {
 var value = e.detail.value
 this.setData({
  multiIndex: value
 })
 console.log(this.data.multiArray[0][value[0]], this.data.multiArray[1][value[1]])
},
PickerColumnChange(e) {
 // 先定义数据,数组里面两个数组,意为两列,当第一列发生改变时侯,给数组重新赋值
 var obj = e.detail
 var multiArray = this.data.multiArray
 if (obj.column == 0 && obj.value == 0) {
  multiArray[1] = this.data.arrColumn0
 }
 if (obj.column == 0 && obj.value == 1) {
  multiArray[1] = this.data.arrColumn1
 }
 this.setData({
  multiArray: multiArray
 })
},

设计思路

multiArray 为弹出层显示数据,为一个数组,数组里面有几个数组,就是显示几列,我这是两个数组,即为显示两列,

multiIndex 为最终选中得数据索引,是函数 PickerChange 参数 e 里面包含得数组

e.detail.value 有两列,即会返回 [1,2] , 前面得 1 表示为,最终选择第一列得数组中索引为 1 对应的那个值。后边得 2 表示为,最终选中得为第二列数据中索引为 2 对应的值

arrColumn0 和 arrColumn1,是我定义得数组,可以从后台直接获取,但是一定要在 picker 组件弹出来之前,附上值。 multiArray 同理也可以这样赋值。

PickerColumnChange 函数,当每一列改变时候都会触发这个函数,

微信小程序picker组件两列关联使用方式

到此这篇关于微信小程序picker组件两列关联使用方式的文章就介绍到这了,更多相关微信小程序picker组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
浅析java线程中断的办法
Jul 29 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 #Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 #Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 #Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 #Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 #Javascript
js实现简易ATM功能
Oct 27 #Javascript
Antd的table组件表格的序号自增操作
Oct 27 #Javascript
You might like
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
VueJS实现用户管理系统
2020/05/29 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
小学毕业感言500字
2014/02/28 职场文书
什么是就业协议书
2014/04/17 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
实验室安全管理制度
2015/08/05 职场文书
2016国培学习心得体会
2016/01/08 职场文书
心理学培训心得体会
2016/01/22 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
Python中else的三种使用场景
2021/06/16 Python
Python anaconda安装库命令详解
2021/10/16 Python