wxml:
<!--pages/category/category.wxml-->
<view class="container">
<scroll-view class='nav_left' scroll-y='true'>
<block wx:for="{
{cateItems}}" wx:key="{
{index}}">
<view class="nav_left_items {
{curNav==item.value?'active':''}}" bindtap="switchRightTab" data-index='{
{index}}' data-id="{
{item.value}}">{
{
item.label}}</view>
</block>
</scroll-view>
<scroll-view class="nav_right" scroll-y="true">
<!--如果有数据，才遍历项-->
<view wx:if="{
{cateItems[curIndex].children.length>0}}">
<block wx:for="{
{cateItems[curIndex].children}}" wx:key="{
{index}}">
<view class="nav_right_items {
{curNav2==item.value?'active':''}}" bindtap="handletwo" data-indextwo='{
{index}}' data-idtwo="{
{item.value}}">
<!--跳转下一级 -->
<text>{
{
item.label}}</text>
</view>
</block>
</view>
</scroll-view>
<scroll-view class="nav_right_two" scroll-y="true" wx:if="{
{cateItems[curIndex].children[curIndex2].children.length>0}}">
<block wx:for="{
{cateItems[curIndex].children[curIndex2].children}}" wx:key="{
{index}}">
<view class="nav_right_items"><text>{
{
item.label}}</text></view>
</block>
</scroll-view>
</view>
js:（其中的数据就不在这里展示，感兴趣可以去下载https://github.com/myyezi/myapi/blob/master/shuju.js）
var shuju = require('./shuju.js')
Page({
data: {
cateItems: shuju,
// curNav: '01', //如果希望有初始值可以加注释的
// curIndex: 0,
// curNav2: 0,
// curIndex2: 0
},
switchRightTab: function (e) {
console.log(e)
let id = e.currentTarget.dataset.id,
index = e.currentTarget.dataset.index;
this.setData({
curNav: id,
curIndex: index
})
},
handletwo: function (e) {
console.log(e)
let id2 = e.currentTarget.dataset.idtwo;
let index2 = e.currentTarget.dataset.indextwo;
this.setData({
curNav2: id2,
curIndex2: index2
})
},
})
wxss:
.container{
position:fixed;
width:100%;
height:100%;
background-color:#FFF;
}
.nav_left{
width:25%;
height:100%;
background:#F2F2F2;
text-align:center;
position:absolute;
top:0;
left:0;
}
.nav_left .nav_left_items{
height:100rpx;
line-height:100rpx;
font-size:28rpx;
}
.nav_left .nav_left_items.active{
position:relative;
background:#FFF;
color:#FF5000;
}
.nav_left .nav_left_items.active::before{
display: inline-block;
width:6rpx;
height:60rpx;
background:#FE5723;
content:'';
position:absolute;
top:20rpx;
left:0;
}
.nav_right{
position:absolute;
top:0;
left:25%;
width:35%;
height:100%;
background-color: #e0e0e0;
}
.nav_right .nav_right_items{
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
text-align: center;
}
.nav_right .nav_right_items image{
width: 120rpx;
height: 120rpx;
}
.nav_right .nav_right_items text{
display: block;
font-size: 28rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nocate{
padding:100rpx;
text-align: center;
}
.nocate image{
width:70rpx;
height:70rpx;
}
.nocate text{
font-size:28rpx;
display:block;
color:#BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.nav_right_two{
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: #c2c0c0;
width: 40%;
}
.nav_right_two .nav_right_items{
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
text-align: center;
}
.nav_right_two .nav_right_items text {
display: block;
font-size: 28rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nav_right .nav_right_items.active{
position: relative;
background: #FFF;
color: #FF5000;
}
.nav_right .nav_right_items.active::before{
display: inline-block;
width:6rpx;
height:60rpx;
background:#FE5723;
content:'';
position:absolute;
top:20rpx;
left:0;
}