#微信小程序#wx:for循环时点击其中某个子组件如何获取它的下标？

本文链接：https://blog.csdn.net/weixin_43811390/article/details/121875419

本文介绍了在微信小程序使用wx:for循环时，如何在点击子组件事件中获取对应的数组下标。通过设置data-index="{{index}}"，可以在点击事件的e对象中获取到组件的下标，从而实现根据下标删除数组中对应元素的功能，而无需为每个子组件添加额外的id属性。

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

问题描述：在小程序中写一个循环组件，需要实现这个功能：点击其中某个子组件，就把这个组件从这个数组中删除，但是不知道点击事件中返回e如何加入代表该子组件下标的信息。
wx:for用到的是一个普通数组[a,b,c]，不想要写一个对象数组，给每一个元素一个序号属性[{value:“a”, id:“0”}, {value:“b”, id:“1”}, {value:“c”, id:“2”}]，而是直接获取它的下标。

解决方法：

        <block wx:for="{{photoList}}" wx:for-item="item" wx:key="index" >
          <view data-index="{{index}}" bindtap="pickDeleteImg">
            <image bindload='bindload' class="draw_canvas" style="" data-type="image" src="{{item}}" mode="widthFix"/>
          </view>
        </block>

wx:for-item=“item” 指定当前元素的变量名，默认是item，比如是"food"，那么就是{{food}}。
如果列表是动态变化的，最好提供 wx:key，具体可看开发者文档对列表渲染的描述

 id="item.id"

可以通过在循环组件中增加id属性，这样点击事件返回的e中就会有这个数据，e.target.id。
但是我不想给每个元素增加一个属性，而是直接用数组下标。
就可以用data-index="{{index}}"
本身在这个循环组件中就可以调用{{index}}表示当前元素下标，然后data-index是你自己创建一个数据变量叫index，这样点击这个组件，就会在e里看到这个组件携带的数据。
e.currentTarget.dataset.index