微信小程序多层嵌套循环，二级数组遍历

小程序中的遍历循环类似于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

<!--一共三组-->

<viewclass="group" wx:for="{{groups}}"  wx:for-index="groupindex">

 

  <!--组头-->

  <viewclass="group-header">

    <viewclass="group-header-left">{{}}</view>

    <viewclass="group-header-right">{{}}</view>

  </view>

<br><br><br>MARK:<br>二级循环的时候，wx:for="item",这种写法是错误的。<br><br>

  <!--cell-->

  <viewclass="group-cell" wx:for="{{groups[groupindex]}}" wx:for-item="cell" wx:for-index="cellindex">

    <!--<image class='group-cell-image' src="{{item.cover}}"></image>-->

    <imageclass='group-cell-image' src="../../img/mineBG.png"></image>

    <viewclass='group-cell-title'>title{{cell.title}}</view>

  </view>

 

  <!--footer-->

  <viewclass="group-footer">{{group.footer}}</view>

</view>