258资源分享网

在商场项目中，一般都会有分类页面。分类页面可以给用户快速找到相关的商品，下面以侧栏分类为例，如下图布局分析：主盒子左盒子右盒子左盒子使用标准流右盒子使用绝对定位（top ...

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

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

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

wxml：

<!--主盒子-->

<viewclass="container">

<!--左侧栏-->

<viewclass="nav_left">

<blockwx:for="{{navLeftItems}}">

<!--当前项的id等于item项的id，那个就是当前状态-->

<!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->

<viewclass="nav_left_items {{curNav == item.id ? 'active' : ''}}"bindtap="switchRightTab"data-index="{{index}}"data-id="{{item.id}}">{{item.tree.desc}}</view>

</block>

</view>

<!--右侧栏-->

<viewclass="nav_right">

<!--如果有数据，才遍历项-->

<viewwx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">

<blockwx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">

<viewclass="nav_right_items">

<navigatorurl="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">

<!--用view包裹图片组合，如果有图片就用，无图片提供就使用50x30的这个默认图片-->

<view>

<blockwx:if="{{item.tree.logo}}">

<imagesrc="{{item.tree.logo}}"></image>

</block>

<blockwx:else>

<imagesrc=""></image>

</block>

</view>

<!--如果有文字，就用文字；无文字就用其他-->

<viewwx:if="{{item.tree.desc}}">

<text>{{item.tree.desc}}</text>

</view>

<viewwx:else>

<text>{{item.tree.desc2}}</text>

</view>

</navigator>

</view>