微信小程序多列选择器range-key使用详解


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了微信小程序多列选择器的具体代码,供大家参考,具体内容如下

<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>
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);
 }


})

请记得点赞额!!!

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
jQuery参数列表集合
Apr 06 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 #Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 #Javascript
微信小程序开发animation心跳动画效果
Aug 16 #Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 #Javascript
微信小程序自定义模态对话框实例详解
Aug 16 #Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 #Javascript
You might like
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
通过C++学习Python
2015/01/20 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
翻译专业应届生求职信
2013/11/23 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
法人任命书范本
2014/06/04 职场文书
甜品店创业计划书
2014/08/14 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL