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

 更新时间:2020年03月30日 15:06:22   作者:Rolan  
这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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


})

请记得点赞额!!!

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

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

相关文章

  • 微信小程序用canvas实现圆形进度条

    微信小程序用canvas实现圆形进度条

    这篇文章主要为大家详细介绍了微信小程序用canvas实现圆形进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性的说明,需要的朋友可以参考下。
    2011-08-08
  • js获取及修改网页背景色和字体色的方法

    js获取及修改网页背景色和字体色的方法

    这篇文章主要介绍了js获取及修改网页背景色和字体色的方法,涉及JavaScript针对页面元素属性的相关操作技巧,需要的朋友可以参考下
    2015-12-12
  • 微信小程序实现顶部选项卡(swiper)

    微信小程序实现顶部选项卡(swiper)

    这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js获得页面的高度和宽度的方法

    js获得页面的高度和宽度的方法

    做一个弹出dialog时用到了取父页面的宽度和高度的方法,需要的朋友可以参考下
    2014-02-02
  • 第五章之BootStrap 栅格系统

    第五章之BootStrap 栅格系统

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下
    2016-04-04
  • js的offsetleft属性的用法小结

    js的offsetleft属性的用法小结

    本文主要介绍了js的offsetleft属性的用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • javascript学习笔记之函数定义

    javascript学习笔记之函数定义

    本文主要给大家介绍了javascript的一些函数定义方面的基础知识,包括函数声明式、函数表达式、Function 构造函数等,十分的简单实用,有需要的小伙伴可以参考下。
    2015-06-06
  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理,ES6中引入了迭代器与可迭代对象的概念,并且提供了对可迭代对象的相关支持,如for...of循环,Map(iterable)构造器,展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06
  • 微信公众号授权登录的超详细步骤

    微信公众号授权登录的超详细步骤

    微信公众号授权登录的使用最为常见,当然只是一些会只有登录,所以选择点击授权登,下面这篇文章主要给大家介绍了微信公众号授权登录的超详细步骤,需要的朋友可以参考下
    2022-12-12

最新评论