专栏首页追逐时光微信小程序picker组件关于objectArray数据类型绑定

微信小程序picker组件关于objectArray数据类型绑定

一、前言:

  我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想要和html中的下拉选中的通过选中获取vaule中的属性值,其实认真查看微信picker组件详解的都知道其实是可以实现的,只不过微信给的实例是array的实例而object array实例是留给大家去动手的哟,在这里我主要介绍的mode=selector 的objectArray实现。

二、介绍:

普通选择器:mode = selector

属性名

类型

默认值

说明

range

Array / Object Array

[]

mode为 selector 或 multiSelector 时,range 有效

range-key

String

当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value

Number

0

value 的值表示选择了 range 中的第几个(下标从 0 开始)

bindchange

EventHandle

value 改变时触发 change 事件,event.detail = {value: value}

disabled

Boolean

false

是否禁用

微信picker组件详解:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html?search-key=picker

首先我的数据格式是:[{ name: '服务质量', id: 20 }, { name: '服务品质', id: 24 }, { name: '服务速度', id: 25}]

.wxml页代码:

//其中range为数据源,value为下标索引,bindchange为change改变事件
<picker range='{{type}}' value='{{idx}}' bindchange='Change' range-key="name" data-id='{{type[index].id}}'>
<view class='picker'>{{type[index].name}}</view>
</picker>

.js代码:

 /**
   * 页面的初始数据
   */
  data: {
    type: [{ name: '服务质量', id: 20 }, { name: '服务品质', id: 24 }, { name: '服务速度', id: 25}],
    index: 0,//索引
  },
  Change: function (e) {
    方法一:
    通过对应数组索引访问:
    consoel.log(type[e.detail.value].id);
    方法二:
    console.log('picker发送选择改变,索引值为', e.detail.value)
    console.log("选中的id值:"+e.target.dataset.id)
    console.log(e);
    this.setData({

      index: e.detail.value

    })

  }

页面效果和输出结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Packets larger than max_allowed_packet are not allowed(mysql数据查询提示:不允许超过允许的最大数据包)解决方案

    首先我的项目运用的时Mysql,在做一个数据更新操作的时候,提示异常:System.Exception:“ExecuteNonQuery:Packets la...

    追逐时光
  • C#在window服务配置Log4Net.dll

      下载地址:http://logging.apache.org/log4net/download_log4net.cgi

    追逐时光
  • .NET Core使用NPOI导出复杂,美观的Excel详解

      这段时间一直专注于数据报表的开发,当然涉及到相关报表的开发数据导出肯定是一个不可避免的问题啦。客户要求要导出优雅,美观的Excel文档格式的来展示数据,当时...

    追逐时光
  • hadoop2.x全分布式集群搭建(一主二从)

    然后生成了id_rsa与id_rsa.pub,分别是私有与公有秘钥,我们要把公有秘钥复制到一个authorized_keys文件内,这个文件的作用就是完成无密码...

    爱学习的孙小白
  • Zookeeper + Hadoop2.6 集群HA + spark1.6完整搭建与所有参数解析

    yum install autoconfautomake libtool cmake

    用户3003813
  • Java程序员的日常——SpringMVC+Mybatis开发流程、推荐系统

    今天大部分时间都在写业务代码,然后算是从无到有的配置了下spring与mybatis的集成。 SpringMVC+Mybatis Web开发流程 配置数据...

    用户1154259
  • mysql : utf8mb4 的问题

    微信呢称和QQ呢称上有很多火星文和emoji表情图片,这些数据,如果直接insert到mysql数据库,一般会报错,设置成utf8都不好使,必须改成utf8mb...

    菩提树下的杨过
  • druid 数据源 使用属性文件的一个坑

    直接上代码: <bean id="propertiesFactoryBean" class="org.springframework.bea...

    菩提树下的杨过
  • Druid数据库连接池 实现数据库账号密码加密

    jar包版本:druid-1.0.15.jar 1. 加密,用以下命令将用户名和密码加密 cmd命令行执行 java -cp druid-1.0.15.jar ...

    冷冷
  • hadoop配置文件

    (1)配置$HADOOP_HOME/conf/hadoop-env.sh 切换到Hadoop的安装路径找到hadoop-0.20.2下的conf...

    闵开慧

扫码关注云+社区

领取腾讯云代金券