微信小程序之嵌套循环修改index与item

微信小程序嵌套时，和vue不一样，一般不需要定义循环的量，自动识别为item和index，如：

<block wx:for="{{menu}}" wx:key="index">
  <view class="cate-item {{item.isActive ? 'active': ''}}" bindtap="selectCategory" data-index="{{index}}" data-flag="0">
    <view class="title">
      <text class="font-size14">{{item.typename}}</text>
      <view class="arrow-wrap" wx:if="{{item._child.length > 0}}">
        <text class="fa fa-caret-down font-size16" style="color: #d6d6d7;"></text>
      </view>
    </view>
  </view>
</block>

如果要对上面的item._child进行循环，就不能还用item和index了，要通过 wx:for-index 和 wx:for-item改变循环的变量，如下：

<block wx:for="{{menu}}" wx:key="index">
  <view class="cate-item {{item.isActive ? 'active': ''}}" bindtap="selectCategory" data-index="{{index}}" data-flag="0">
    <view class="title">
      <text class="font-size14">{{item.typename}}</text>
      <view class="arrow-wrap" wx:if="{{item._child.length > 0}}">
        <text class="fa fa-caret-down font-size16" style="color: #d6d6d7;"></text>
      </view>
    </view>
    <view class="child-lists" wx:if="{{item._child.length > 0}}" style="display: {{item.isChildActive ?  'block' : 'none'}};">
      <block wx:for="{{item._child}}" wx:key="child" wx:for-index="index2" wx:for-item="i">
        <view catchtap="selectCategory" data-index="{{index}}" data-childIndex="{{index2}}" data-flag="1" class="cate-sub-item {{i.isActive ? 'active': ''}}">
          <view class="sub-title">
            <text>{{i.typename}}</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</block>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！