【微信小程序自学之路】双重循环嵌套

小程序 双重循环

开发微信小程序过程中,可能实在需要涉及到双重循环的场景,如

1
2
3
4
5
6
7
<swiper current="{{ toView }}">
<swiper-item wx:for="{{ questionList }}" wx:key="{{ index }}">
<view class="section">
<view wx:for="{{ item['answers'] }}" wx:key="{{ index }}">{{ item['id'] }}</view>
</view>
</swiper-item>
</swiper>

如上,有两层循环 wx:for ,那其中的 item 到底是外层循环的元素 还是 内层循环的元素呢 ?

在这种情况下,我们需要对其中一个item重命名,即:

1
2
3
4
5
6
7
<swiper current="{{ toView }}">
<swiper-item wx:for="{{ questionList }}" wx:key="{{ index }}">
<view class="section">
<view wx:for="{{ item['answers'] }}" wx:key="{{ index }}" wx:for-item="questionItem">{{ questionItem['id'] }}</view>
</view>
</swiper-item>
</swiper>

这样,item 就是指 外层循环的元素, questionItem 就是指内层循环的元素

当然能规避这种双层循环的涉及,也不是一个好的措施。

坚持原创技术分享,谢谢鼓励我继续创作!