微信小程序picker中普通选择器selector获取objectarray中自定义id的获取问题

本文介绍了一种在微信小程序中使用picker组件时,如何正确获取自定义id值的方法。通过设置picker的range属性为包含id的数组,并在bindchange事件中获取当前选中的值,从而解决了自定义id值获取不正确的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

解决<picker data-id="{{type[index].id}}"></picker>方式获取的自定义id值不正确

*.wxml

<picker range='{{type}}' value='{{index}}' bindchange="Change" range-key="name">
  <view class='picker'>{{type[index].name}}</view>
</picker>

*.js

Page({
	data:{
		type: [{ name: 'key1', id: 20 }, { name: 'key2', id: 24 }, { name: 'key3', id: 25}],
    index: 0,//索引
	},
	Change: function (e) {
	    this.setData({
	     index: e.detail.value
	    })
	    var indes = e.detail.value;
	    var dataid = this.data.type[indes]['id'];
	    console.log(dataid);
   },
})

在这里插入图片描述

### 微信小程序 Picker 组件作为普通选择器的使用 #### 基本概念 Picker 组件在微信小程序中用来实现选择器功能,允许用户从多个选项中进行选择。该组件能够呈现多种形式的选择方式,如单列选择、多列联动选择等[^1]。 #### 属性设置 为了使 Picker 组件正常工作并显示为普通选择器,需正确配置其属性。主要涉及 `mode` 和 `range` 这两个重要参数: - **mode**: 设置为 `'selector'` 表示这是一个普通的单项选择模式; - **range**: 定义可供选择的数据源,通常是一个字符串数组或对象数组;如果是对象数组,则还需要指定 `range-key` 来指明要展示的对象字段名称。 #### 实现代码示例 下面给出一段完整的 WXML 及 JS 文件中的代码片段来说明如何创建一个简单的单选 Picker 组件: ```html <!-- index.wxml --> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange"> 当前选择:{{array[index]}} </picker> ``` ```javascript // index.js Page({ data: { array: ['美国', '中国', '巴西', '日本'], index: 0, }, bindPickerChange(e) { console.log('picker发送选择改变,携带值为', e.detail.value); this.setData({ index: e.detail.value }) } }) ``` 此段代码展示了如何初始化数据以及监听用户的交互行为,并更新页面上的当前选择项[^2]。 #### 处理复杂情况下的选择 当面对更复杂的业务逻辑时,比如需要处理的是由键值对组成的对象而非简单字符串的情况,可以通过设定 `range-key` 参数指向具体想要展现给用户的那个属性名。例如,在上述例子基础上修改成如下形式即可适应新的需求[^3]。 ```json [ {"id": "US", "name": "美国"}, {"id": "CN", "name": "中国"} ] ``` 此时应调整对应的 JavaScript 部分以匹配新结构化的输入数据集。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值