微信小程序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参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
解决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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
js实现导航跟随效果
2018/11/17 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
js实现烟花特效
2020/03/02 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python3 pygame实现接小球游戏
2019/05/14 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
十佳护士获奖感言
2014/02/18 职场文书
班级口号大全
2014/06/09 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
代收款委托书范本
2014/10/01 职场文书
教代会闭幕词
2015/01/28 职场文书
文员岗位职责范本
2015/04/16 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
anaconda python3.8安装后降级
2021/06/11 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript