微信小程序多列选择器
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);
}
})
微信小程序多列选择器的更多相关文章
- 自定义省市选择器 微信小程序多列选择器
由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使 ...
- mpvue微信小程序多列选择器用法:实现省份城市选择
前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...
- 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...
- 微信小程序—picker(滚动选择器)
官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...
- 微信小程序-关于日期选择器(input)
小程序并没有input带有日期组件(只有picker组件带日期),要不自创,要不就用picker把选中的值放入input当中 wxml js 因为会触发input,所以禁用它就可以了
- picker-view、微信小程序自定义时间选择器(非官方)
picker-view自定义时间选择器 官网的自定义时间选择器比较简陋.日期不准 下面是我自己写的一个demo <view class="baseList"> < ...
- 微信小程序多列选择器之range-key
<picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnch ...
- 微信小程序 自定义省市选择器
1.把省市数据放在city.js中,city.js放在until目录下 // city.js module.exports = { "province": [ { "ti ...
随机推荐
- Django之ORM查询操作详解
浏览目录 一般操作 ForeignKey操作 ManyToManyField 聚合查询 分组查询 F查询和Q查询 事务 Django终端打印SQL语句 在Python脚本中调用Django环境 其他操 ...
- android 调试的一些问题解决1
1.系统自带的机器跑起来太卡,我想用雷电模拟器来运行.可是打开后找不到设备怎么弄? 解决办法: 步骤1:>>>运行模拟器 步骤2:>>>win + r 打开cmd ...
- 题解 CF1359A 【Berland Poker】
题意 给出 \(n,m,k\) ,表示 \(k\) 名玩家打牌,共 \(n\) 张牌,\(m\) 张王,保证 \(k|n\) ,记得分为 拿到最多王的玩家手中王数 \(-\)拿到第二多王的玩家手中的王 ...
- Makefile中的奇葩字符
% : Makefile规则通配符,一般出现在目标或是依赖中 * : shell命令中的通配符,一般出现在命令中 $@:目标的名字 $^:所有依赖的名字 $<:第一个依赖的名字 $?:所有依赖中 ...
- 大型Java进阶专题(九) 设计模式之总结
前言 关于设计模式的文章就到这里了,学习这门多设计模式,你是不是有这样的疑惑,发现很多设计模式很类似,经常会混淆某些设计模式.这章节我们将对设计模式做一个总结,看看各类设计模式有什么区别.需要注意 ...
- python爬虫入门(5)----- 阿里巴巴供应商爬虫
阿里巴巴供应商爬虫# 起因## 学了爬虫入门之后,打算找一个有难度的网站来实践,一开始打算找淘宝或者天猫(业界老大)来实践,但后续发现网上已经有很多这方面的项目,于是瞄上了阿里的国际网站阿里巴巴.开始 ...
- three.js 数学方法之Matrix3
今天郭先生来说一说three.js的三维矩阵,这块知识需要结合线性代数的一些知识,毕业时间有点长,线性代数的知识大部分都还给了老师.于是一起简单的复习了一下.所有的计算都是使用列优先顺序进行的.然而, ...
- python-多任务编程02-进程(processing)
进程与程序 程序:例如xxx.py这是程序,是一个静态的 进程:一个程序运行起来后,代码+用到的资源 称之为进程,它是操作系统分配资源的基本单元. multiprocessing模块 multipro ...
- 阿里云OSS服务器的使用
关于文件上传,我们一般使用OSS服务器.大致为两种上传方式: 详情官网参考:https://help.aliyun.com/document_detail/31927.html?spm=a2c4g.1 ...
- 感性认识JWT
常见的认证机制 今天我么聊一聊JWT. 关于JWT,相信很多人都已经看过用过,他是基于json数据结构的认证规范,简单的说就是验证用户登没登陆的玩意.这时候你可能回想,哎哟,不是又那个session么 ...