微信小程序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-17- 一开始想学学服务端渲染，脑海中第一个浮现出来的就是next.js这种成熟的方案。看了一两天，有趣，优雅，但是封装好了，原理不甚清楚，也感觉无法灵活嵌合到老2019-04-17
前言 ASP.NET Web API是​​一个框架，可以很容易构建达成了广泛的HTTP服务客户端，包括浏览器和移动设备。是构建RESTful应用程序的理想平台的.NET2019-04-17- 本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>w2019-04-17
- 安装 nuxt.js Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种是根据自己的需求自由配置 使用2019-04-17
ASP.NET Core应用错误处理之DeveloperExceptionPageMiddleware中间件呈现“开发者异常页面”
前言 在《ASP.NET Core应用的错误处理[1]：三种呈现错误页面的方式》中，我们通过几个简单的实例演示了如何呈现一个错误页面，这些错误页面的呈现分别由三个对2019-04-17-
asp.net core 获取 MacAddress 地址方法示例
本文告诉大家如何在 dotnet core 获取 Mac 地址 因为在 dotnetcore 是没有直接和硬件相关的，所以无法通过 WMI 的方法获取当前设备的 Mac 地址 但是在 dotnet2019-04-17 -
vue防止花括号{{}}闪烁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 - 本文实例讲述了vue计算属性computed的使用方法。分享给大家供大家参考，具体如下： computed:{ b:function(){ //默认调用get return 值 } }2019-04-17
最新评论