微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

在商场项目中，一般都会有分类页面。 
分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图

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

左盒子使用标准流 
右盒子使用绝对定位（top、right）

wxml：

1. [html] view plain copy
2.  
3. <view class="container">
4.  
5. <view class="nav_left">
6. <block wx:for="{{navLeftItems}}">
7.  
8.  
9. <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}view>
10. block>
11. view>
12.  
13. <view class="nav_right">
14.  
15. <view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
16. <block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
17. <view class="nav_right_items">
18. <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
19.  
21. <block wx:if="{{item.tree.logo}}">
22. <image src="{{item.tree.logo}}">image>
23. block>
24. <block wx:else>
25. <image src="https://temp.im/50x30">image>
26. block>
27. view>
28.  
29. <view wx:if="{{item.tree.desc}}">
30. {{item.tree.desc}}text>
31. view>
32. <view wx:else>
33. {{item.tree.desc2}}text>
34. view>
35. navigator>
36. view>
37. block>
38. view>
39.  
40. <view wx:else>暂无数据view>