微信小程序多列选择器之range-key

<picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{‘name‘}}">
   <view class="picker">
      当前选择:{{objectMultiArray[0][multiIndex[0]].name}},{{objectMultiArray[1][multiIndex[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);
  }

})

请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!请记得点赞额!!!

 
时间: 2024-10-05 18:17:39

微信小程序多列选择器之range-key的相关文章

自定义省市选择器 微信小程序多列选择器

由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使用的时候可以通过util 来引用 //p_c.js module.exports = { "province": [ { "title": "上海市", "weight": 1, "evaluation_value&qu

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

进军微信小程序之准备工作

小程序这么火,不去浪一浪怎么行? 更何况,现在微信"赦免"了个人认证,又更新了web开发工具,现在正是搞搞小程序的最佳时期! 那么一起来看看要做什么准备吧~ 官方的文档很详细,可参考:小程序官方说明. 首先,要注册一个微信公众平台账号(与订阅号不通用),注册地址:微信小程序注册,选择小程序进行注册就好. 填写好了注册信息,进行邮箱验证后,就可以登录玩耍了. 这里获取开发者ID: 另外下载最新的微信web开发工具,下载地址:微信web开发工具下载. 下载安装后,通过appid进行登录,然

微信小程序--家庭记账本开发--01

微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先进入"微信公众平台"官网( https://mp.weixin.qq.com/ ),进入注册界面,注册自己的微信小程序账号,登陆成功之后,进入自己小程序的后台,获取开发所需的AppID,并点击下载相应的微信Web开发者工具,下载完成后,进行安装. 2.开发工具的学习: 打开微信Web开发者

怎么选择制作微信小程序公司

互联网新时代来临之后,各大传统行业面临着转型的局面,更是在微信的影响,涌现了很多关于小程序的行业.那么怎么选择制作微信小程序公司,相信这是不少企业和商家都想了解的问题. 制作一个微信小程序可以帮助商家快速的实现移动化办公,操作便利的同时,还能提高商户以及公司人员的工作效率.此外,制作小程序可以通过不同的端口进行宣传推广,在宣传推广的成本上给予了大家很大的帮助. 随着需求量的不断增加,衍生出不少制作微信小程序公司,那么企业和商家又该如何选择呢?一个可靠的微信小程序公司,需要拥有这些方面.首先,针对

开发微信小程序外包公司怎么选择

人们的生活已经离不开网络,走在大街上许多人都在看着手机,获取各类信息,有刷微博关注新闻动态,有刷朋友圈了解熟人近况,乐在其中.由于微信用户数量多,小程序推出之后,不少企业和商家都希望拥有一个小程序,帮助它们扩展业务.但一些企业可能不怎么开发小程序,所以开发微信小程序外包公司由此出现. 各种APP软件,微信小程序层出不穷,让人眼花缭乱,但也会有良莠不齐的情况.从交通出行到电商购物,微信小程序已应用到多个场景.这可能也得益于开发微信小程序外包公司的帮助. 通常来说,一个致力于开发微信小程序的外包公司

从零开始:微信小程序新手入门宝典

为了方便大家了解并入门微信小程序,特将可能会需要的知识,列在这里,让大家方便的从零开始学习 一:微信小程序的特点 张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开应用,也出现了用完即走的理念,用户不用关心安装太多应用的问题,应用随处可用,但又无须安装卸载.我当时是这样来定义什么是小程序的. 1:无需下载:我们直接使用它,所以无须安装是小程序最基础的一个特性: 2:触手可及:当我们拿着智能手机接触周边的时

我看小程序系列文章:1 不一样的角度 解读微信小程序

大家好,我是Beta007. 最近一直在研究小程序,会在这里整理出一系列的文章,和大家交流. 第一篇文章首发在了知乎专栏:小楼昨夜又秋风:https://zhuanlan.zhihu.com/p/22891188 知乎ID:七月在夏天  (头像是只喵~) 不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙的小程序,还未展现全貌,就已经成了开发界的头条大事儿.