微信小程序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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
js控制input框只读实现示例
Jan 20 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
PHP 一个随机字符串生成代码
2010/05/26 PHP
百度地图API使用方法详解
2015/08/25 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
js自带函数备忘 数组
2006/12/29 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python LMDB库的使用示例
2021/02/14 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
学校安全教育制度
2014/01/31 职场文书
工程建设实施方案
2014/03/14 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
暖春观后感
2015/06/08 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python