微信小程序选择器组件在objectArray数据类型上的绑定方法

一、前言：

我发现很多同学抱怨微信小程序的picker的mode=selector/mode=multi selector无法实现Object Array数据类型的绑定。事实上，许多人希望通过从html的下拉选择中选择属性值来获取vaule中的属性值。其实仔细查看微信拾音器组件细节的人都知道是可以实现的，只是微信给出的实例是数组的实例，对象数组的实例留给大家去做。这里主要介绍模式选择器实现objectArray。

二.导言：

普通选择器：模式=选择器

属性名称类型默认值表示当范围数组/对象数组[]模式为选择器或多选器时，范围有效。范围键字符串当范围是对象数组时，使用范围键指定对象中的键值作为选择器显示内容。valuenumber0的值指示选择了范围中的哪个数字(下标从0开始)。当bindchange EventHandle值更改时，会触发更改事件。event . detail={ value : value } disabled boolean false是否禁用微信选取器组件。详情：https://developers . weixin . QQ.com/mini program/dev/component/picker . html？搜索键=选择器

首先我的数据格式是：[{ name: '服务质量'，id: 20 }，{ name: '服务质量'，id: 24 }，{name: '服务速度'，id: 25}]。wxml页面代码：

//其中range是数据源，value是下标索引，Bindchange是一个更改事件选取器范围=' { { type } } ' value=' { { idx } } ' Bindchange=' change ' range-key=' name ' data-id=' { { type[index]。id } }“view class=”选取器“{type [index]”

/* * *页面的初始数据*/data : { type :[{name: '服务质量'，id: 20 }，{name: '服务质量'，id3360 24}，{ name : '服务速度'，id: 25}。Index: 0，//Index}，change : function(e){ console . log(' picker发送选择更改，index值为'，e . detail . value)console . log(' selected id值为： ' e . target . dataset . id)console . log(e)Page effect及其输出结果. setdata({ index : e . detail . value }):

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。