微信小程序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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
解决await在forEach中不起作用的问题
Feb 25 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
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python类属性的延迟计算
2016/10/22 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
简单了解python模块概念
2018/01/11 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python设置环境变量的原因和方法
2019/06/24 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
电子商务专业个人的自我评价
2013/11/19 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
应聘会计求职信
2014/06/11 职场文书
新闻传播专业求职信
2014/07/22 职场文书
pt-archiver 主键自增
2022/04/26 MySQL
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL