index.wxml
<!--主盒子-->
<
view
class=
"container">
<!--左侧栏-->
<
view
class=
"nav_left">
<
block
wx:for=
"{{cateItems}}"
wx:key=
"id">
<!--当前项的id等于item项的id，那个就是当前状态-->
<!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
<
view
class=
"nav_left_items {{curNav == item.cate_id ? 'active' : ''}}"
bindtap=
"switchRightTab"
data-index=
"{{index}}"
data-id=
"{{item.cate_id}}">{{item.cate_name}}
</
view
>
</
block
>
</
view
>
<!--右侧栏-->
<
view
class=
"nav_right">
<!--如果有数据，才遍历项-->
<
view
wx:if=
"{{cateItems[curIndex].ishaveChild}}">
<
block
wx:for=
"{{cateItems[curIndex].children}}"
wx:key=
"id">
<
view
class=
"nav_right_items">
<!--界面跳转 -->
<
navigator
url=
"../../detail/detail}}">
<
image
src=
"{{item.image}}"></
image
>
<
text
>{{item.name}}
</
text
>
</
navigator
>
</
view
>
</
block
>
</
view
>
<!--如果无数据，则显示数据-->
<
view
class=
"nodata_text"
wx:else
>该分类暂无数据
</
view
>
</
view
>
</
view
>
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:
6px
0;
/*只设下边线*/
border-bottom:
1px
solid
#dedede;
/*文字14px*/
font-size:
14px;
}
/*左侧栏list的item被选中时*/
.nav_left
.nav_left_items.active{
/*背景色变成白色*/
background:
#fff;
color:
#3385ff;
border-left:
3px
solid
#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_items
image{
/*被图片设置宽高*/
width:
60px;
height:
60px;
margin-top:
15px;
}
.nav_right
.nav_right_items
text{
/*给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;
}
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，和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index);
// 把点击到的某一项，设为当前index
this.setData({
curNav: id,
curIndex: index
})
}
})