微信小程序多列选择器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 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
javascript测试题练习代码
2012/10/10 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
面试常见的js算法题
2017/03/23 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Python对象体系深入分析
2014/10/28 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Python实现播放和录制声音的功能
2020/08/12 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
分公司总经理岗位职责
2014/07/30 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
摩登时代观后感
2015/06/03 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python