在商場項目中，一般都會有分類頁面。 
分類頁面可以給用戶快速找到相關的商品，下面以側欄分類為例，如下圖 

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

左盒子使用標準流 
右盒子使用絕對定位（top、right） 

wxml：

1. <!--主盒子-->
2. <view class="container">
3. <!--左側欄-->
4. <view class="nav_left">
5. <block wx:for="{{navLeftItems}}">
6. <!--當前項的id等于item項的id，那個就是當前狀態(tài)-->
7. <!--用data-index記錄這個數(shù)據(jù)在數(shù)組的下標位置，使用data-id設置每個item的id值，供打開2級頁面使用-->
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. <!--右側欄-->
12. <view class="nav_right">
13. <!--如果有數(shù)據(jù)，才遍歷項-->
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的這個默認圖片-->
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>