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

{{item.tree.desc}}

{{item.tree.desc}}

{{item.tree.desc2}}

暂无数据

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 .nav_right_items text{

/给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数据对象

var that = this

wx.request({

url: ‘http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList’,

method: ‘GET’,

data: {},

header: {

题外话

我们见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了7、8年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。

不断奔跑，你就知道学习的意义所在！

注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
！

注意：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

[外链图片转存中…(img-vNMWXwIO-1715265320483)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！