微信小程序wx:for wx:for-index data-xxx及相关字段说明

wx:for="{ {list}}" //list为要循环遍历的数组

wx:for-items="{ {list}}" //list为要循环遍历的数组,同for一样

wx:for-item="item" //item作为代表每一项的对象

wx:key="{ {index}}" //作为遍历数组的唯一标识符

wx:for-index="{ {fc}}" //’它是指向当前元素的下标名,可以在其他事件中定义自定义事件(data-xxx={ {fc}},,该自定义属性可以在参数e下面打印出来)获取该下标。所以wx:for-index="{ {变量名}}"和data-xxx={ {变量名}}是搭配在一起使用,最后通过e.currentTarget.dataset.xxx获取到该下标。双重循环如何获取下标请看代码:

<view wx:for-items="{
         
  {master}}" wx:for-item=itemaa wx:for-index=keys  wx:key="{
         
  {index}}" >
    <view>{
         
  {itemaa.section_name}}</view>
    <view wx:for-items="{
         
  {itemaa.vars}}" wx:key="{
         
  {index}}" wx:for-index=key  wx:for-item=item data-index="{
         
  {itemaa}} ">
      <view>
        <text>{
         
  {item.key}}</text>
        <text data-index={
         
  {item}} data-id="{
         
  {key}}" data-ddid="{
         
  {keys}}">{
         
  {item.link}}</text>
      </view>
    </view>
  </view>

用key绑定了里面的数组,并用key来绑定内层数组下标

用keys绑定外层数组,用ddid来绑定下标

最后通过e.currentTarget.dataset.id获取到里面数组(第二层数组)的下标,通过e.currentTarget.dataset.ddid获取到第一层数组的下标。另外因为data-index="{ {item}}",所以可以直接通过e.currentTarget.dataset.index获取内部数组整条item的值。

经验分享 程序员 微信小程序 职场和发展