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

<左盒子></左盒子>

<右盒子></右盒子>

</主盒子>

左盒子使用标准流

右盒子使用绝对定位（top、right）

wxml：

<view class="container">

<view class="nav_left">

<block wx:for="{{navLeftItems}}">

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

</block>

</view>

<view class="nav_right">

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

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

<view class="nav_right_items">

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

<view>

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

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

</block>

<block wx:else>

<image src="http://temp.im/50x30"></image>

</block>

</view>

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

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

</view>

<view wx:else>

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

</view>

</navigator>

</view>

</block>

</view>

<view wx: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: 6px 0;

/只设下边线/

border-bottom: 1px solid #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_items image{

/被图片设置宽高/

width: 50px;

height: 30px;

}

.nav_right .na

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

v_right_items text{

/给 text 设成块级元素/

display: block;

margin-top: 5px;

font-size: 10px;

/设置文字溢出部分为.../

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}