在商場(chǎng)項(xiàng)目中，一般都會(huì)有分類頁面。 
分類頁面可以給用戶快速找到相關(guān)的商品，下面以側(cè)欄分類為例，如下圖 

布局分析： 
<主盒子> 
<左盒子> 
<右盒子> 

左盒子使用標(biāo)準(zhǔn)流 
右盒子使用絕對(duì)定位（top、right） 

wxml：

1. <!--主盒子-->
2. <view class="container">
3. <!--左側(cè)欄-->
4. <view class="nav_left">
5. <block wx:for="{{navLeftItems}}">
6. <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id，那個(gè)就是當(dāng)前狀態(tài)-->
7. <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置，使用data-id設(shè)置每個(gè)item的id值，供打開2級(jí)頁面使用-->
8. <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>
9. </block>
10. </view>
11. <!--右側(cè)欄-->
12. <view class="nav_right">
13. <!--如果有數(shù)據(jù)，才遍歷項(xiàng)-->
14. <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
15. <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
16. <view class="nav_right_items">
17. <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
18. <!--用view包裹圖片組合，如果有圖片就用，無圖片提供就使用50x30的這個(gè)默認(rèn)圖片-->
19. <view>
20. <block wx:if="{{item.tree.logo}}">
21. <image src="{{item.tree.logo}}"></image>
22. </block>
23. <block wx:else>
24. <image src="http://temp.im/50x30"></image>
25. </block>
26. </view>
27. <!--如果有文字，就用文字；無文字就用其他-->
28. <view wx:if="{{item.tree.desc}}">
29. <text>{{item.tree.desc}}</text>
30. </view>
31. <view wx:else>
32. <text>{{item.tree.desc2}}</text>
33. </view>
34. </navigator>
35. </view>