微信小程序picker组件关于objectArray数据类型的绑定方法
更新时间:2019-04-17 21:43:34 作者:佚名 我要评论(0)
我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想要和
一、前言:
我发现很多的同学都在抱怨说微信小程序的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实现级联菜单
- 微信小程序时间控件picker view使用详解
- 微信小程序实现自定义picker选择器弹窗内容
- 微信小程序picker组件简单用法示例【附demo源码下载】
- 微信小程序picker组件下拉框选择input输入框的实例
- 微信小程序之picker日期和时间选择器
- 微信小程序 picker-view 组件详解及简单实例
- 微信小程序 picker 组件详解及简单实例
您可能感兴趣的文章:
相关文章
微信小程序picker组件关于objectArray数据类型的绑定方法
一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想要和2019-04-17ASP.NET Core应用错误处理之DeveloperExceptionPageMiddleware中间件呈现“开发者异常页面”
前言 在《ASP.NET Core应用的错误处理[1]:三种呈现错误页面的方式》中,我们通过几个简单的实例演示了如何呈现一个错误页面,这些错误页面的呈现分别由三个对2019-04-17asp.net core 获取 MacAddress 地址方法示例
本文告诉大家如何在 dotnet core 获取 Mac 地址 因为在 dotnetcore 是没有直接和硬件相关的,所以无法通过 WMI 的方法获取当前设备的 Mac 地址 但是在 dotnet2019-04-17vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法。分享给大家供大家参考,具体如下: 一、v-text和v-html <span>{{msg}}</span> -->2019-04-17在asp.net core中使用类似Application的服务的实现
Intro# 在 asp.net 中,我们可以借助 Application 来保存一些服务器端全局变量,比如说服务器端同时在线的人数计数,比如一些网站的配置信息。 在 ASP.NET 应2019-04-17
最新评论