wxml

<picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'name'}}">
<view class="picker">
当前选择:{{objectMultiArray[0][multiIndex2[0]].name}},{{objectMultiArray[1][multiIndex2[1]].name}}
</view>
</picker>

wxjs

Page({

  /**
* 页面的初始数据
*/
data: {
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
]
],
multiIndex2: [0, 0],
}, bindMultiPickerChange2: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex2: e.detail.value
})
},
bindMultiPickerColumnChange2: function (e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var data = {
objectMultiArray: this.data.objectMultiArray,
multiIndex2: this.data.multiIndex2
};
data.multiIndex2[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex2[0]) {
case 0:
data.objectMultiArray[1] = [
{ id: 0, name: '扁性动物' },
{ id: 1, name: '线形动物' },
{ id: 2, name: '环节动物' },
{ id: 3, name: '软体动物' },
{ id: 3, name: '节肢动物' }
];
// data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.objectMultiArray[1] = [
{ id: 0, name: '鱼' },
{ id: 1, name: '线形两栖动物' },
{ id: 2, name: '爬行动物' }
];
break;
}
data.multiIndex2[1] = 0;
// data.multiIndex[2] = 0;
break;
}
this.setData(data);
} })

  

微信小程序多列选择器的更多相关文章

  1. 自定义省市选择器 微信小程序多列选择器

    由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使 ...

  2. mpvue微信小程序多列选择器用法:实现省份城市选择

    前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...

  3. 微信小程序----日期时间选择器(自定义精确到分秒或时段)

    声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...

  4. 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...

  5. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  6. 微信小程序-关于日期选择器(input)

    小程序并没有input带有日期组件(只有picker组件带日期),要不自创,要不就用picker把选中的值放入input当中 wxml js 因为会触发input,所以禁用它就可以了

  7. picker-view、微信小程序自定义时间选择器(非官方)

    picker-view自定义时间选择器 官网的自定义时间选择器比较简陋.日期不准 下面是我自己写的一个demo <view class="baseList"> < ...

  8. 微信小程序多列选择器之range-key

    <picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnch ...

  9. 微信小程序 自定义省市选择器

    1.把省市数据放在city.js中,city.js放在until目录下 // city.js module.exports = { "province": [ { "ti ...

随机推荐

  1. java大数据最全课程学习笔记(1)--Hadoop简介和安装及伪分布式

    Hadoop简介和安装及伪分布式 大数据概念 大数据概论 大数据(Big Data): 指无法在一定时间范围内用常规软件工具进行捕捉,管理和处理的数据集合,是需要新处理模式才能具有更强的决策力,洞察发 ...

  2. 关于Mint-UI中loadmore组件的兼容性问题

    源代码 遇到的问题 写完了之后数据加载,渲染等等都是没有问题的,但是测试总是提上滑刷新不能用,因为是远程开发,测试提就得改,看代码看文档,看半天看不出来问题,想到了兼容性问题,发现也有人遇到这个坑.安 ...

  3. MYSQL JSON字段操作

    create CREATE TABLE t_test ( salary_data json NULL COMMENT 'JSON类型字段' ); -- insert INSERT INTO t_tes ...

  4. eclipse导入项目出现红叉

    转载:原博客 导入web项目有红叉时可能是path环境不支持需要配置自己电脑的path,所以需要build path 出现java代码错误或者…jsp文件出错(https://img-blog.csd ...

  5. vsCode的一些个人配置

    本文主要用来记录我在使用vsCode中的一些个人习惯设置. 编辑器主题配置 主题我是用的是 escook-theme,这是我在看某视频教程时发现的一款看起来非常友好的vsCode主题. 文件图标主题 ...

  6. 题解 洛谷 P1552 【[APIO2012]派遣】

    根据题意,我们不难发现忍者之间的关系是树形结构. 发现答案的统计只是在该节点的子树中,因此我们考虑通过树形\(DP\)来解决问题. 从叶子节点开始,从下往上考虑,因为一个节点的最优答案只与他的领导力和 ...

  7. Docker 概念-1

    阅读本文大概需要15分钟,通过阅读本文你将知道一下概念: 容器 什么是Docker? Docker思想.特点 Docker容器主要解决什么问题 容器 VS 虚拟机 Docker基本概念: 镜像(Ima ...

  8. 深度搜索---------Lake counting

    #include<iostream>#include<cstdio>#include<cstdlib>#define maxn 100char ch[maxn][m ...

  9. XML--概念、约束、解析

    概念 XML:可扩展标记语言 HTML:超文本标记语言 两者的区别: 1.语法结构类似,单语法要求不同 HTML不区分大小写,XML严格区分大小写 在HTML中,有时不严格,如果上下文清楚地显示出段落 ...

  10. 零起点PYTHON机器学习快速入门 PDF |网盘链接下载|

      点击此处进入下载地址 提取码:2wg3 资料简介: 本书采用独创的黑箱模式,MBA案例教学机制,结合一线实战案例,介绍Sklearn人工智能模块库和常用的机器学习算法.书中配备大量图表说明,没有枯 ...