微信小程序双层/多层 wx:for 循环嵌套，关于内外层的 index 和 item ；data-index 传递两个参数

微信小程序用 wx:for 循环可以快速将后端 js 的数组快速显示到前端；

那假如数组中嵌套数组；就存在内外层两层及以上的多层嵌套循环了。

那么如果两层的嵌套式循环 index 究竟是属于哪一层呢？item 又属于哪一个呢？

javascript 复制代码

<view>
    <view wx:for="{{questList}}" wx:key="index">
        <view bindtap="showContent" data-index="{{index}}">
            {{index}} {{item.title}}
        </view>
        <view>
            <checkbox-group  wx:for="{{item.items}}">
                <view>
                    <checkbox checked="{{item.checked}}" />
                    {{index}}{{item}}
                    <text>{{item.name}}</text>
                </view>
            </checkbox-group>
        </view>
    </view>
</view>

我在这里使用的是 checkbox 复选框，下面是 js 中的内容数据

javascript 复制代码

data: {
        questList: [{
          title: 'Q.问题',
          items: [
            { name: '美国',checked:false},
            { name: '中国',checked:true},
            { name: '巴西',checked:false},
            { name: '日本',checked:false},
            { name: '英国',checked:false},
            { name: '法国',checked:false}
          ]
        }, {
          title: 'Q.问题',
          items: [
            { name: '美国',checked:false},
            { name: '中国',checked:true},
            { name: '巴西',checked:false},
            { name: '日本',checked:false},
            { name: '英国',checked:false},
            { name: '法国',checked:false}
          ]
        }],
    },

这个数据有两层嵌套的数组数据了。

最直接的两侧嵌套循环显示就完成了；

那么关于内外层的 index 下标关系：在默认情况下，这个第二层的循环也是用 index 作为下标；并且直接覆盖第一层的 index ；也就是说如果你是在第二层循环中输出 {{index}} 那么这个输出的是第二层的下标值；如果说你是在第一层循环中输出 {{index}} 那就是第一层的下标值；

同样 item 也是同理；若只是这样没有重新定义；item 也和 index 同理，在不同的循环层中会覆盖不同的 item 值。

那么如果规范化的话：通常会选择重新定义一个 key 、index、item 用以区分开不同的循环下表和内容；（当然，你不重新定义也是可以的，也不会报错，用起来还省事）

首先定义一个新的 key

javascript 复制代码

<view>
    <view wx:for="{{questList}}" wx:key="index">
        <view bindtap="showContent" data-index="{{index}}">
            {{index}} {{item.title}}
        </view>
        <view wx:if="{{item.folding}}">
            <checkbox-group wx:for="{{item.items}}" wx:key="pancan">
                <view>
                    <checkbox checked="{{item.checked}}" />
                    {{index}}{{pancan}}
                    <text>{{item.name}}</text>
                </view>
            </checkbox-group>
        </view>
    </view>
</view>

其实这个 key 还是写一下吧；不写的话不会爆红错误；但是会有黄色的提示老是弹出来。

在 wx:for 循环中，应该使用 wx:for-item 来指定当前项的变量名。在第二次循环中，如果你希望使用 pancan 作为下标值，而不是继续使用外部循环的 index。为了做到这一点，你需要在内部循环中使用另一个变量来表示内部下标。在代码中使用 innerIndex 作为新的内部循环的下表。

javascript 复制代码

<view>
    <view wx:for="{{questList}}" wx:key="index">
        <view bindtap="showContent" data-index="{{index}}">
            {{index}} {{item.title}}
        </view>
        <view wx:if="{{item.folding}}">
            <checkbox-group wx:for="{{item.items}}" wx:key="pancan" wx:for-item="pancan" wx:for-index="innerIndex">
                <view>
                    <checkbox checked="{{pancan.checked}}" />
                    {{innerIndex}}{{pancan}}
                    <text >{{pancan.name}}</text>
                </view>
            </checkbox-group>
        </view>
    </view>
</view>

现在，通过使用 wx:for-item="pancan"，pancan 变量将包含当前项的值。内部循环将使用 innerIndex 作为下标值，而不是外部循环的 index。

wx:for-item="pancan"这个是什么用的呢？ wx:key="pancan" 这个又是什么用的呢？🤔

wx:for-item 是一个指定循环中单个项目变量名称的属性。当你在 wx:for 中循环列表时，它告诉小程序哪个变量名代表列表的当前项目。这样你就可以使用这个变量来访问每个循环项目的属性。

例如，如果你指定 wx:for-item="pancan"，那么在循环中，每个项目就会被命名为 pancan。这使你能够引用项目的属性，例如 pancan.name 或 pancan.checked。通过 wx:for-item，你可以确保循环中的每个项目都有一个唯一的标识符。

wx:key 是用来标识循环项目的属性。它的主要作用是告诉小程序每个循环项目的唯一标识符，这样小程序在重新渲染或进行 DOM 操作时可以优化性能。如果没有指定 wx:key，可能会导致小程序每次重新渲染整个列表，这可能会影响性能。

通过为 wx:for 设置 wx:key，你可以告诉小程序用哪个字段来唯一标识循环中的每个项目。例如，设置 wx:key="pancan" 时，表示小程序会将 pancan 的值作为循环项目的唯一标识符，从而在需要重新渲染或更新时提高效率。

那么双层循环遍历读取数组的就完美完成了。你可以分别读取她们的下表和值。

如果我还想将数据通过点击的方法跳转到方法，并将数据给到方法中处理。那么可以使用 data-index

javascript 复制代码

<checkbox-group bindchange="onCheckboxChange"  wx:for="{{item.items}}" wx:key="innerIndex" wx:for-index="innerIndex" wx:for-item="innerItem" data-index="{{index}}">

使用 data-index 可以将 index 等各类数据传递到给方法中；

🙋：那我要两个值呢？

额........🤔

这个也没问题；同样可以用 data-index 可以将多个数据传递。如下：

javascript 复制代码

<checkbox-group bindchange="onCheckboxChange"  wx:for="{{item.items}}" wx:key="innerIndex" wx:for-index="innerIndex" wx:for-item="innerItem" data-index="{{[index, innerIndex]}}">

那么接收到的数据就如下：0是第一层循环的下表，1是第二层循环的下标。在这个例子中，我将 data-index 设置为一个包含外部索引 index 和内部索引 innerIndex 的数组。然后，当你点击或触发事件时，可以通过解析这个数组来获取这两个索引值。结果如下：

如果文章对你有帮助，记得点赞、收藏、关注👍⭐🧧