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


Posted in Javascript onMarch 13, 2019

一、前言:

我发现很多的同学都在抱怨说微信小程序的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) {

  console.log('picker发送选择改变,索引值为', e.detail.value)
  console.log("选中的id值:"+e.target.dataset.id)
  console.log(e);
  this.setData({

   index: e.detail.value

  })

 }

页面效果和输出结果:

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

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

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

Javascript 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 #Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 #Javascript
深入理解Node内建模块和对象
Mar 12 #Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 #Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 #Javascript
React中this丢失的四种解决方法
Mar 12 #Javascript
使用koa2创建web项目的方法步骤
Mar 12 #Javascript
You might like
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
js实现简单点赞操作
2020/03/17 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Django返回json数据用法示例
2016/09/18 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
阿里云:Aliyun.com
2017/02/15 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
采购主管工作职责
2013/12/12 职场文书
学年自我鉴定
2014/01/16 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
英语老师推荐信
2014/02/26 职场文书
民间个人借款协议书
2014/09/30 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
Android Studio 计算器开发
2022/05/20 Java/Android