在使用微信小程序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组件两列关联使用方式的更多相关文章

  1. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  2. 微信小程序 自定义组件 多列选择器 对象数组 ObjectArray 自关联 三级联动

    使用方法 在 Page.json 注册组件 { "usingComponents": { "address-picker": "/component/ ...

  3. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  4. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  5. 微信小程序_(组件)icon、text、rich-text、progress四大基础组件

    微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...

  6. 微信小程序_(组件)scroll-view可滚动视图

    微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...

  7. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

  8. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  9. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

随机推荐

  1. 【FLASK】钩子函数的使用

    from flask import Flask from flask import abort app = Flask(__name__) # 在第一次请求之前调用,可以在此方法内部做一些初始化操作 ...

  2. ASP.NET Core 基于声明的访问控制到底是什么鬼?

    从ASP.NET 4.x到ASP.NET Core,内置身份验证已从基于角色的访问控制(RBAC)转变为基于声明的访问控制(CBAC). 我们常用的HttpContext.User属性ASP.NET ...

  3. CUMTCTF'2020 已做wp

    三天的比赛终于结束了,不知道有没有睡10个小时,感觉像中了魔一样,但也很享受这种感觉,除了没有能和我一起琢磨题目朋友.. 就最终结果而言还是有一些可惜,明明号称擅长web和misc反而是得分比例最小的 ...

  4. vsCode 搭建Java开发环境

    1.安装扩展 Java Extension Pack Spring Boot Extension Pack 2.配置Maven 打开设置 搜索maven 找到并打开  在 settings.json ...

  5. 在Ubuntu下部署Flask项目

    FlaskDemo 命名为test.py # coding=utf-8 from flask import Flask app = Flask(__name__) @app.route("/ ...

  6. day59:Linux:编辑工具vim&文件类型&文件属性

    目录 1.Linux编辑工具vim 2.Linux文件类型 3.Linux文件属性 4.今日份Linux练习题 Linux编辑工具vim 1.什么是vim 文本文件的编辑工具,  和windows的n ...

  7. RabbitMQ小记(一)

    1.了解消息中间件 消息中间件,Message Queue Middleware,简称MQ,又称消息对列或消息对列中间件,利用高效可靠的消息传递机制进行与平台无关的数据交流,并基于数据通信来进行分布式 ...

  8. linux系统或centos7安装nginx

    一.Linux下安装nginx 1.添加源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-cen ...

  9. Python基础-列表、元组、字典、字符串(精简解析)

    一.列表 =====================================================1.列表的定义及格式: 列表是个有序的,可修改的,元素用逗号隔开,用中括号包围的序列 ...

  10. 用 shell 脚本做 restful api 接口监控

    问题的提出 基于历史原因,公司有一个"三无"采集服务--无人员.无运维.无监控--有能力做的部门不想接.接了的部门没能力.于是就一直这样裸奔,直到前几天一个依赖于这个采集服务的大数 ...