小程序多层嵌套wx:for循环多个嵌套数组 嵌套循环修改index与item 列表渲染 嵌套for循环 （二维以上循环）

 

小程序中进行列表循环的时候，如果有嵌套列表循环中，就需要解决默认的index和item 别名的问题

这是我在工作中做的一个品牌筛选列表

 

其中遇到了要嵌套循环 brandList,进行列表渲染

在小程序中，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

这时候就需要用到 wx:for-index  和 wx:for-item 来解决

<view wx:for="{{brandList}}" id="{{'brand_'+e_index}}" wx:for-item="e" wx:for-index="e_index" wx:key="e_index" index="{{e.firstLetter}}">
    
    <view class="item-title">{{e.firstLetter}}</view>

    <view class="item-brand "  wx:for="{{e.list}}" wx:key="index" wx:for-item="i" wx:for-index="i_index" data-id="{{i.code}}" data-name="{{i.name}}"  >

        <van-checkbox use-icon-slot value="{{ i.brand_checked }}" data-group_index="{{e_index}}" data-item_index="{{i_index}}" bind:change="onBrandSelectChange">
            <image slot="icon" class="radio-image" mode="widthFix" src="{{ i.brand_checked ? icon.active : icon.normal }}" />{{i.name}}
        </van-checkbox>
          
    </view>
</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：