1.

index.wxml

!--主盒子--viewclass"container"!--左侧栏--viewclass"nav_left"blockwx:for"{{cateItems}}"wx:key"id"!--当前项的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}}"wx:key"id"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/view2.

index.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: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:#3385ff;border-left:3pxsolid#3385ff;}/*右侧栏主盒子*/.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;}3.

index.js

Page({data:{cateItems:[{cate_id:1,cate_name:"水果",ishaveChild:true,children:[{child_id:1,name:'樱桃',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t15613/296/2281640440/392160/6e019064/5a9a450dNa47bf95f.jpg!q50.jpg"},{child_id:2,name:'樱桃',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t15613/296/2281640440/392160/6e019064/5a9a450dNa47bf95f.jpg!q50.jpg"},{child_id:3,name:'樱桃',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t15613/296/2281640440/392160/6e019064/5a9a450dNa47bf95f.jpg!q50.jpg"},{child_id:4,name:'樱桃',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t15613/296/2281640440/392160/6e019064/5a9a450dNa47bf95f.jpg!q50.jpg"}]},{cate_id:2,cate_name:"干果",ishaveChild:true,children:[{child_id:1,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:2,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:3,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:4,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:5,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:6,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:7,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"},{child_id:8,name:'夏威夷果',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t18901/57/1522219067/198105/1f4ad39/5acaccb2Nf4a6792b.jpg!q50.jpg"}]},{cate_id:3,cate_name:"蔬菜",ishaveChild:true,children:[{child_id:1,name:'有机上海青',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t2827/290/2563889921/292001/bf218791/576b843eN1f7e4b44.jpg!q50.jpg"},{child_id:2,name:'有机上海青',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t2827/290/2563889921/292001/bf218791/576b843eN1f7e4b44.jpg!q50.jpg"},{child_id:3,name:'有机上海青',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t2827/290/2563889921/292001/bf218791/576b843eN1f7e4b44.jpg!q50.jpg"},{child_id:4,name:'有机上海青',image:"https://m.360buyimg.com/mobilecms/s357x357_jfs/t2827/290/2563889921/292001/bf218791/576b843eN1f7e4b44.jpg!q50.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})}})