微信小程序多列选择器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);
 }


})

请记得点赞额!!!

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

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

相关文章

  • javascript实现圣旨卷轴展开效果(代码分享)

    javascript实现圣旨卷轴展开效果(代码分享)

    本文主要介绍了javascript实现圣旨卷轴展开效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 简单谈谈JavaScript变量提升

    简单谈谈JavaScript变量提升

    对于学习JavaScript的初学者来说,变量提升是绕不过去的一个知识点,简单来说变量提升就是 JS会把var变量的声明自动提升到作用域的顶部,这篇文章主要给大家介绍了关于JavaScript变量提升的相关资料,需要的朋友可以参考下
    2021-09-09
  • 国外大牛IE版本检测!现在IE都到9了,IE检测代码

    国外大牛IE版本检测!现在IE都到9了,IE检测代码

    有时会去看看国外大牛的一些代码,并学习,引用,并感叹大牛就是大牛,差距不是一点点,也在一点点的感叹中慢慢拉进和大牛的距离
    2012-01-01
  • Javascript对象属性方法汇总

    Javascript对象属性方法汇总

    这篇文章主要是对Javascript对象属性方法进行了详细的汇总介绍。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JS插入排序简单理解与实现方法分析

    JS插入排序简单理解与实现方法分析

    这篇文章主要介绍了JS插入排序简单理解与实现方法,结合实例形式分析了JavaScript插入排序基本原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-11-11
  • javascript实现页面滚屏效果

    javascript实现页面滚屏效果

    本文主要介绍了javascript实现页面滚屏效果的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js用类封装pop弹窗组件

    js用类封装pop弹窗组件

    这篇文章主要为大家详细介绍了js用类封装pop弹窗组件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 前端导出PDF的组件及方法实际例子

    前端导出PDF的组件及方法实际例子

    这篇文章主要介绍了三种流行的前端导出PDF的组件和方法,分别是jsPDF、pdfMake和Print.js,每个库都有其特点和适用场景,可以根据具体需求选择合适的库,需要的朋友可以参考下
    2025-02-02
  • ECMAScript6变量的解构赋值实例详解

    ECMAScript6变量的解构赋值实例详解

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring),下文中给大家提供了嵌套数组的解构例子,大家一起看看吧
    2017-09-09
  • KnockoutJS 3.X API 第四章之数据控制流component绑定

    KnockoutJS 3.X API 第四章之数据控制流component绑定

    这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流component绑定的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10

最新评论