小程序中的遍历循环类似于angularJS的遍历。
二级数组遍历有一个坑。二级遍历wx:for循环的时候,需要注意。(代码如下)
JS代码:
data: { groups: [ [ { title: '狼图腾', cover: '../../img/mineBG.png' }, { title: '狼图腾', cover: '../../img/mineBG.png' }, ], [ { title: '狼图腾', cover: '../../img/mineBG.png' }, ], [ { title: '狼图腾', cover: '../../img/mineBG.png' }, ] ], },
遍历出不同的数组,然后渲染不同组的cell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!--一共三组-->
<
view
class="group" wx:for="{{groups}}" wx:for-index="groupindex">
<!--组头-->
<
view
class="group-header">
<
view
class="group-header-left">{{}}</
view
>
<
view
class="group-header-right">{{}}</
view
>
</
view
>
<
br
><
br
><
br
>MARK:<
br
>二级循环的时候,wx:for="item",这种写法是错误的。<
br
><
br
>
<!--cell-->
<
view
class="group-cell" wx:for="{{groups[groupindex]}}" wx:for-item="cell" wx:for-index="cellindex">
<!--<image class='group-cell-image' src="{{item.cover}}"></image>-->
<
image
class='group-cell-image' src="../../img/mineBG.png"></
image
>
<
view
class='group-cell-title'>title{{cell.title}}</
view
>
</
view
>
<!--footer-->
<
view
class="group-footer">{{group.footer}}</
view
>
</
view
>
|