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. (3)html-webpack-plugin的作用

    在内存中生成index.html页面 在前面的内容中我们已经知道了如何在内存中打包main.js并引入到页面中. 同样的,我们也可以把index.html也打包放入到内存中. 安装html-webpa ...

  2. Python Hacking Tools - Port Scanner

    Socket Programming 1.  Scan the target Vulnerable Server. And test it by telnet. 2. Write the scanne ...

  3. 机器学习实战---K均值聚类算法

    一:一般K均值聚类算法实现 (一)导入数据 import numpy as np import matplotlib.pyplot as plt def loadDataSet(filename): ...

  4. C#数据结构与算法系列(二十三):归并排序算法(MergeSort)

    1.介绍 归并排序(MergeSort)是利用归并的思想实现的排序方法,该算法采用经典的分治策略(分治法将问题分(divide)成一些小的问题然后递归求解, 而治(conquer)的阶段则将分的阶段得 ...

  5. vscode用MinGW和Clang配置C++环境

    vscode是个不错的编辑器,简洁轻量,就是一开始的时候需要对环境进行配置,开个贴记录一下怎么用MingGW64+clang来配置. 下载地址 LLVM Download Page Pre-Built ...

  6. 题解 SP1841 【PPATH - Prime Path】

    模拟赛考到了这个题,但我傻傻的用了\(DFS\),于是爆了零 后来才想明白,因为搜索树的分支很多,但答案的深度却又没有那么深,所以在这里\(BFS\),而\(DFS\)一路搜到底的做法则会稳稳地\(T ...

  7. 分布式锁(3) ----- 基于zookeeper的分布式锁

    分布式锁系列文章 分布式锁(1) ----- 介绍和基于数据库的分布式锁 分布式锁(2) ----- 基于redis的分布式锁 分布式锁(3) ----- 基于zookeeper的分布式锁 代码:ht ...

  8. .Net Core Controller

    [HttpGet] public async Task<ActionResult<IEnumerable<ABBUserModel>>> GetUser() { / ...

  9. I 2 C、 SPI、 USB驱动架构

    根据图12.4, Linux倾向于将主机端的驱动与外设端的驱动分离, 而通过一个核心层将某种总线的协议进行抽象, 外设端的驱动调用核心层API间接过渡到对主机驱动传输函数的调用. 对于I 2 C. S ...

  10. js冒泡排序和数组去重

    1.冒泡排序 <script>//声明一个数组 var arr=[1,88,66,22,35,65,4,52];//自执行函数 (function maopao(){ for(var i= ...