jsdata:{cateItems:[{cate_id:1,cate_name:"护肤",ishaveChild:true,children:[{child_id:1,name:'洁面皂',image:"http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"},{child_id:2,name:'卸妆',image:"http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"},{child_id:3,name:'洁面乳',image:"http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"},{child_id:4,name:'面部祛角质',image:"http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"}]},{cate_id:2,cate_name:"彩妆",ishaveChild:true,children:[{child_id:1,name:'气垫bb',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"},{child_id:2,name:'修容/高光',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"},{child_id:3,name:'遮瑕',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"},{child_id:4,name:'腮红',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"},{child_id:5,name:'粉饼',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"},{child_id:6,name:'粉底',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"},{child_id:7,name:'蜜粉/散粉',image:"http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"},{child_id:8,name:'隔离霜',image:"http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"}]},{cate_id:3,cate_name:"香水/香氛",ishaveChild:true,children:[{child_id:1,name:'淡香水EDT',image:"http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"},{child_id:2,name:'浓香水EDP',image:"http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"},{child_id:3,name:'香体走珠',image:"http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"},{child_id:4,name:'古龙香水男士的最爱',image:"http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"}]},{cate_id:4,cate_name:"个人护理",ishaveChild:false,children:[]}],curNav:1,curIndex:0},//事件处理函数switchRightTab:function(e){//获取item项的id，和数组的下标值letide.target.dataset.id,indexparseInt(e.target.dataset.index);//把点击到的某一项，设为当前indexthis.setData({curNav:id,curIndex:index})}1.

js代码有点长，但是逻辑很清晰1.cateItems展示的数据2.curNav控制当前那个按钮点亮3.curIndex根据此参数来拿第几个分类的数据4.switchRightTab分类tab事件的处理

2.

cateItems里的数据每一个对象都是一个品类的数据，拿第一个品类护肤来说1.cate_id识别的id2.cate_name一级分类名称3.ishaveChild判断是否有子集4.children二级目录的数据

wxml!--主盒子--viewclass"container"!--左侧栏--viewclass"nav_left"blockwx:for"{{cateItems}}"!--当前项的id等于item项的id，那个就是当前状态--!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用--viewclass"nav_left_items{{curNavitem.cate_id?'active':''}}"bindtap"switchRightTab"data-index"{{index}}"data-id"{{item.cate_id}}"{{item.cate_name}}/view/block/view!--右侧栏--viewclass"nav_right"!--如果有数据，才遍历项--viewwx:if"{{cateItems[curIndex].ishaveChild}}"blockwx:for"{{cateItems[curIndex].children}}"viewclass"nav_right_items"!--界面跳转--navigatorurl"../../detail/detail}}"imagesrc"{{item.image}}"/imagetext{{item.name}}/text/navigator/view/block/view!--如果无数据，则显示数据--viewclass"nodata_text"wx:else该分类暂无数据/view/view/view3.

1.nav_left_items{{curNavitem.cate_id?‘active’:‘’}}在js代码中已经说了curNav的作用，就是在这里实现的2.根据是否和一级目录cate_id相同，来判断是否点亮文字。相同执行.nav_left_items.active样式，不相同则执行.nav_left_items样式

wxsspage{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:40px;/*垂直居中*/line-height:40px;/*再设上下padding增加高度，总高42px*/padding:6px0;/*只设下边线*/border-bottom:1pxsolid#dedede;/*文字14px*/font-size:14px;}/*左侧栏list的item被选中时*/.nav_left.nav_left_items.active{/*背景色变成白色*/background:#fff;color:#f0145a;}/*右侧栏主盒子*/.nav_right{/*右侧盒子使用了绝对定位*/position:absolute;top:0;right:0;flex:1;/*宽度75%，高度占满，并使用百分比布局*/width:75%;height:1000px;padding:10px;box-sizing:border-box;background:#fff;}/*右侧栏list的item*/.nav_right.nav_right_items{/*浮动向左*/float:left;/*每个item设置宽度是33.33%*/width:33.33%;height:120px;text-align:center;}.nav_right.nav_right_itemsimage{/*被图片设置宽高*/width:60px;height:60px;margin-top:15px;}.nav_right.nav_right_itemstext{/*给text设成块级元素*/display:block;margin-top:15px;font-size:14px;color:black;/*设置文字溢出部分为...*/overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.nodata_text{color:black;font-size:14px;text-align:center;}4.

设置字体垂直居中【.nav_left.nav_left_items】把height与line-height两个属性设置成一样即可实现字体垂直居中但有个局限性，是字体要是单行的，因为line-height本身也是设置行高

5.

单行文字过长部分要用省略号（之前的公告中，css也有实现）overflow:hidden;white-space:nowrap;//设置单行显示text-overflow:ellipsis;

拓展wx:for6.

微信小程序列表的渲染，我们之前做首页的时候就有接触过用于循环数组，展示列表型数据默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

viewwx:for"{{items}}"wx:key"unique"{{index}}:{{item.message}}/view7.

也可以自定义变量表使用wx:for-item可以指定数组当前元素的变量名使用wx:for-index可以指定数组当前下标的变量名

viewwx:for"{{array}}"wx:for-index"idx"wx:for-item"itemName"wx:key"unique"{{idx}}:{{itemName.message}}/viewwx:if8.

微信小程序条件渲染，通常是在if里面写判断语句，满足条件就执行这个view控件，通常有if对应就有else，对应的不满足if条件就执行else对应的view控件。

viewwx:if"{{length5}}"1/viewviewwx:elif"{{length2}}"2/viewviewwx:else3/view9.

把wx:if和hidden做对比，他们都可以实现让控件显示与隐藏if是当满足条件的时候才会渲染view，而hidden是view一定会被渲染，只不过控制显示与隐藏罢了

10.

一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好

11.

转载请注明出处！