微信小程序多列选择器
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 ...
随机推荐
- How to start MySQL on Linux
启动MySQL数据库 service mysql start 查看MySQL进程 ps -ef |grep mysql 查看MySQL端口号 cd /etc/init.d/ netstat -atnp ...
- WindowsTerminal折腾记
背景 Windows Terminal最近出了1.0版本,界面非常美观,但要配置好还是要下一番功夫,而且网上的教程都是互相抄,所以特将我的配置过程记录如下. 字体 首先是字体,默认字体英文不错,但中文 ...
- Sequential Minimal Optimization: A Fast Algorithm for Training Support Vector Machines 论文研读
摘要 本文提出了一种用于训练支持向量机的新算法:序列最小优化算法(SMO).训练支持向量机需要解决非常大的二 次规划(QP)优化问题.SMO 将这个大的 QP 问题分解为一系列最小的 QP 问题.这些 ...
- OSCP Learning Notes - Buffer Overflows(2)
Finding the Offset 1. Use the Metasploite pattern_create.rb tool to create 5900 characters. /usr/sha ...
- 《2020版Linux云计算学习图谱》帮你提升80%专业技能,在线免费领
2亿人在家办公.视频会议的需求,给钉钉后台系统带来巨大压力.据了解,钉钉在通过阿里云紧急扩容1万台服务器后,再度扩容1万台云服务器. 受疫情影响,在家办公需求暴涨.从29号开始到2月6日,腾讯会议每天 ...
- 2020年20个Flutter最漂亮的UI库和项目
Best-Flutter-UI-Templates 地址:https://github.com/mitesh77/Best-Flutter-UI-Templates The History of Ev ...
- 【Kafka】Kafka测试时控制台日志级别修改
在学习Kafka客户端时日志打的飞起,根本看不到自己发的消息,找了半天网上竟然没有这方面的资料.想了下依赖关系,这里应该只要把slf4j的日志级别调整应该就ok了. static { LoggerCo ...
- 【mysql】- 索引使用篇
回顾 每个索引都对应一棵B+树,B+树分为好多层,最下边一层是叶子节点,其余的是内节点.所有用户记录都存储在B+树的叶子节点,所有目录项记录都存储在内节点. InnoDB 存储引擎会自动为主键(如果没 ...
- HashMap源码实现分析
HashMap源码实现分析 一.前言 HashMap 顾名思义,就是用hash表的原理实现的Map接口容器对象,那什么又是hash表呢. 我们对数组都很熟悉,数组是一个占用连续内存的数据结构,学过C的 ...
- github 新功能 profile README.md
引 自从github被微软收购后,每天都会有一些新花样,ui变化,界面变化,更多的功能,相信这个它会越来越好,程序员越来越喜欢.今天浏览大佬的github 无意中发现了 github profile ...