作者：handsomeBoys，來(lái)自原文地址

一：多層嵌套循環(huán)，二級(jí)數(shù)組遍歷

小程序中的遍歷循環(huán)類(lèi)似于angularJS的遍歷。

二級(jí)數(shù)組遍歷有一個(gè)坑。二級(jí)遍歷wx：for循環(huán)的時(shí)候，需要注意。（代碼如下）

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. },

遍歷出不同的數(shù)組，然后渲染不同組的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:二級(jí)循環(huán)的時(shí)候，wx:for="item",這種寫(xiě)法是錯(cuò)誤的。
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>

二：設(shè)置data里面的數(shù)據(jù)

關(guān)于設(shè)置 data里面的數(shù)據(jù)

wxml:

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

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

有兩種方法：

方法一：  直接使用點(diǎn)關(guān)系符號(hào)賦值，類(lèi)似于普通賦值，但是這樣的話，外面使用綁定的數(shù)據(jù)，不會(huì)實(shí)現(xiàn)臟檢查，wxml綁定的數(shù)據(jù)不回及時(shí)更新。

例子：

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

方法二：  使用系統(tǒng)提供的setData()方法,這樣的 話，系統(tǒng)會(huì)執(zhí)行類(lèi)似于angularJS框架的臟檢查，wxml綁定的數(shù)據(jù)會(huì)馬上刷新，實(shí)現(xiàn)數(shù)據(jù)的綁定。

例子：

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