微信小程序如何实现侧栏分类效果(微信小程序,web开发)

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

布局分析：

<主盒子>
<左盒子></左盒子>
<右盒子></右盒子>
</主盒子>
左盒子使用标准流
右盒子使用绝对定位（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="http://temp.im/50x30"></image></block></view><!--如果有文字，就用文字；无文字就用其他--><viewwx:if="{{item.tree.desc}}"><text>{{item.tree.desc}}</text></view><viewwx:else><text>{{item.tree.desc2}}</text></view></navigator></view></block></view><!--如果无数据，则显示数据--><viewwx:else>暂无数据</view></view></view>

wxss：

page{background:#f5f5f5;}/*总体主盒子*/.container{position:relative;width:100%;height:100%;background-color:#fff;color:#939393;}/*左侧栏主盒子*/.nav_left{/*设置行内块级元素（没使用定位）*/display:inline-block;width:25%;height:100%;/*主盒子设置背景色为灰色*/background:#f5f5f5;text-align:center;}/*左侧栏list的item*/.nav_left.nav_left_items{/*每个高30px*/height:30px;/*垂直居中*/line-height:30px;/*再设上下padding增加高度，总高42px*/padding:6px0;/*只设下边线*/border-bottom:1pxsolid#dedede;/*文字14px*/font-size:14px;}/*左侧栏list的item被选中时*/.nav_left.nav_left_items.active{/*背景色变成白色*/background:#fff;}/*右侧栏主盒子*/.nav_right{/*右侧盒子使用了绝对定位*/position:absolute;top:0;right:0;flex:1;/*宽度75%，高度占满，并使用百分比布局*/width:75%;height:100%;padding:10px;box-sizing:border-box;background:#fff;}/*右侧栏list的item*/.nav_right.nav_right_items{/*浮动向左*/float:left;/*每个item设置宽度是33.33%*/width:33.33%;height:80px;text-align:center;}.nav_right.nav_right_itemsimage{/*被图片设置宽高*/width:50px;height:30px;}.nav_right.nav_right_itemstext{/*给text设成块级元素*/display:block;margin-top:5px;font-size:10px;/*设置文字溢出部分为...*/overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

js：

Page({data:{navLeftItems:[],navRightItems:[],curNav:1,curIndex:0},onLoad:function(){//加载的使用进行网络访问，把需要的数据设置到data数据对象varthat=thiswx.request({url:'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',method:'GET',data:{},header:{'Accept':'application/json'},success:function(res){console.log(res)that.setData({navLeftItems:res.data,navRightItems:res.data})}})},//事件处理函数switchRightTab:function(e){//获取item项的id，和数组的下标值letid=e.target.dataset.id,index=parseInt(e.target.dataset.index);//把点击到的某一项，设为当前indexthis.setData({curNav:id,curIndex:index})}})