微信小程序实战商城系列《一》侧栏分类

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

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

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

wxml：

1. <!--主盒子-->
2. <view class="container">
3. <!--左侧栏-->
4. <view class="nav_left">
5. <block wx:for="{{navLeftItems}}">
6. <!--当前项的id等于item项的id，那个就是当前状态-->
7. <!--用data-index记录这个数据在数组的下标位置，使用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. <!--如果有数据，才遍历项-->
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="https://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>