微信小程序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随机生成不重复数据的实例方法
Jul 17 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
layui选项卡效果实现代码
May 19 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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 之入门篇
2006/12/04 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
js 内存释放问题
2010/04/25 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
javaScript基础详解
2017/01/19 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
领导视察欢迎词
2014/01/15 职场文书
妇女干部培训方案
2014/05/12 职场文书
入职担保书范文
2014/05/21 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014年消防工作总结
2014/11/21 职场文书
大学生党性分析材料
2014/12/19 职场文书
导师工作推荐信
2015/03/27 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技