我爱模板网 > 建站教程 > 小程序、公众号 >  微信小程序之嵌套循环修改index与item正文

微信小程序之嵌套循环修改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>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:微信授权登录及获取微信手机号进行绑定 下一篇:微信小程序onShareAppMessage详解
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢