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


})

请记得点赞额!!!

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

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

相关文章

  • webpack中的模式(mode)使用详解

    webpack中的模式(mode)使用详解

    这篇文章主要介绍了webpack中的模式(mode)使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • javascript 三种方法实现获得和设置以及移除元素属性

    javascript 三种方法实现获得和设置以及移除元素属性

    获得和设置以及移除元素属性在操作dom的过程中会经常遇到吧,为了提高工作的效率本文整理了一些快捷操作方法和大家一起分享,感兴趣的朋友可以参考下哈
    2013-03-03
  • 浅析上传头像示例及其注意事项

    浅析上传头像示例及其注意事项

    本文主要分享一个简易的上传头像示例以及其大致流程、实现过程中需要注意的事项。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS实现横向轮播图(中级版)

    JS实现横向轮播图(中级版)

    这篇文章主要为大家详细介绍了JS实现横向轮播图的中级版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • bootstrapTable+ajax加载数据 refresh更新数据

    bootstrapTable+ajax加载数据 refresh更新数据

    这篇文章主要为大家详细介绍了bootstrapTable+ajax加载数据,以及refresh更新数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JS 非图片动态loading效果实现代码

    JS 非图片动态loading效果实现代码

    功能说明:譬如在按某个button时,显示消息"Loading”,然后每隔一秒后后面加上".",至一定数量的"."时如:"Loading...",再重置此消息为"Loading",继续动态显示,直至按钮事件处理完成。
    2010-04-04
  • JavaScript Event学习补遗 addEventSimple

    JavaScript Event学习补遗 addEventSimple

    这里有个addEventSimple和removeEventSimple函数,有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。
    2010-02-02
  • JavaScript实现找出字符串中第一个不重复的字符

    JavaScript实现找出字符串中第一个不重复的字符

    这篇文章主要介绍了JavaScript实现找出字符串中第一个不重复的字符的方法,需要的朋友可以参考下
    2014-09-09
  • 浅谈React碰到v-if

    浅谈React碰到v-if

    这篇文章主要介绍了浅谈React碰到v-if,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • javascript中利用柯里化函数实现bind方法

    javascript中利用柯里化函数实现bind方法

    这篇文章主要为大家详细介绍了javascript中利用柯里化函数实现bind方法,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论