作者：handsomeBoys，來自原文地址

一：多層嵌套循環，二級數組遍歷

小程序中的遍歷循環類似于angularJS的遍歷。

二級數組遍歷有一個坑。二級遍歷wx：for循環的時候，需要注意。（代碼如下）

JS代碼：

1. data: {
2. groups: [
3. [
4. {
5. title: '狼圖騰',
6. cover: '../../img/mineBG.png'
7. },
8. {
9. title: '狼圖騰',
10. cover: '../../img/mineBG.png'
11. },
12. ],
13. [
14. {
15. title: '狼圖騰',
16. cover: '../../img/mineBG.png'
17. },
18.  
19. ],
20. [
21. {
22. title: '狼圖騰',
23. cover: '../../img/mineBG.png'
24. },
25.  
26. ]
27. ],
28. },

遍歷出不同的數組，然后渲染不同組的cell

1. <!--一共三組-->
2. <view class="group" wx:for="{{groups}}" wx:for-index="groupindex">
3.  
4. <!--組頭-->
5. <view class="group-header">
6. <view class="group-header-left">{{}}</view>
7. <view class="group-header-right">{{}}</view>
8. </view>
9. MARK:二級循環的時候，wx:for="item",這種寫法是錯誤的。
10. <!--cell-->
11. <view class="group-cell" wx:for="{{groups[groupindex]}}" wx:for-item="cell" wx:for-index="cellindex">
12. <!--<image class='group-cell-image' src="{{item.cover}}"></image>-->
13. <image class='group-cell-image' src="../../img/mineBG.png"></image>
14. <view class='group-cell-title'>title{{cell.title}}</view>
15. </view>
16.  
17. <!--footer-->
18. <view class="group-footer">{{group.footer}}</view>
19. </view>

二：設置data里面的數據

關于設置 data里面的數據

wxml:

1. <view>{{userName}}</view>

1. data: {
2.  
3. 　　userName:'張三'，
4.  
5. }

有兩種方法：

方法一：  直接使用點關系符號賦值，類似于普通賦值，但是這樣的話，外面使用綁定的數據，不會實現臟檢查，wxml綁定的數據不回及時更新。

例子：

1. this.data.userName = '李四'；

方法二：  使用系統提供的setData()方法,這樣的 話，系統會執行類似于angularJS框架的臟檢查，wxml綁定的數據會馬上刷新，實現數據的綁定。

例子：

1. this.setData({
2.  
3. userName = '李四'；
4.  
5. })