热门标签 | HotTags
当前位置:  开发笔记 > 小程序 > 正文

微信小程序多列选择器rangekey的使用

这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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


 
  当前选择:{{objectMultiArray[0][multiIndex2[0]].name}},{{objectMultiArray[1][multiIndex2[1]].name}}
 

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


})

请记得点赞额!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!


推荐阅读
  • 本文讨论了如何在微信支付宝两套小程序中生成一张二维码,实现支付宝扫码进入支付宝小程序和微信扫码进入微信小程序的对应桌号进行点餐的功能,提供了一些实现方案供参考。 ... [详细]
  • 微信开放外链的第二阶段:腾讯和阿里巴巴的博弈
    2021年11月30日,微信开始进行“开放外链”的第二阶段,允许在微信个人会话中打开外部链接和在微信群中打开电商链接。虽然这是腾讯和阿里巴巴都能接受的阶段性结果,但双方都不会太满意。接下来几个月,腾讯和阿里将展开复杂的博弈,我们作为外人很难看清全过程。工信部从未要求腾讯无条件开放微信API,本次开放的也只是普通的HTTP链接。 ... [详细]
  • 小程序获取用户信息按钮返回中文地址
    1.我是根据官方文档中描述去写的按钮 可以看到button中加了zh_CNopen-typegetUserInfobindgetuserinfogetU ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 本文介绍了小程序商城引进流量的优化策略与方法。首先,通过附近小程序功能可以增加周围门店的方位并展示,吸引附近用户。其次,利用微信群聊功能,将小程序分享到多个微信群聊中,扩大影响力。最后,通过设置一些固定的活动机制,打造仪式感来吸引用户。这些方法能够有效提升小程序商城的流量,增加用户数量。 ... [详细]
  • 微信答题小程序的设计与实现详解
    本文详细介绍了如何设计和实现一个微信答题小程序,包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息,实现了题目的刷新和显示。同时,还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ... [详细]
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 14亿人的大项目,腾讯云数据库拿下!
    全国人 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • 使用flex弹性布局来为微信小程序写自适应页面
    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖display属性positi ... [详细]
  • PHP小习题:PHP小练习题前几天在百度知道里面看到有位网友询问如何制作一下的小程序:用php语言设计一个小程序,计算今天到达下月的天数、全部输出这些天数,并使得每天的日期以三种颜 ... [详细]
  • 西安小程序开发,小程序制作,一个后台管理多端小程序功能性
    小程序已经发展4年多时间大全app下载汅api免费安卓。从最初简单demo到现在底层api接口。让我们的小程序和APP一样可以轻松的操作硬件信息。对于调取手机硬 ... [详细]
  • 面试经验分享:华为面试四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试
    最近有朋友去华为面试,面试经历包括四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试。80%的人都在第一轮电话面试中失败,因为缺乏基础知识。面试问题涉及 ... [详细]
  • android 触屏处理流程,android触摸事件处理流程 ? FOOKWOOD「建议收藏」
    android触屏处理流程,android触摸事件处理流程?FOOKWOOD「建议收藏」最近在工作中,经常需要处理触摸事件,但是有时候会出现一些奇怪的bug,比如有时候会检测不到A ... [详细]
author-avatar
衢江大道
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有