小程序分类页实现三级分类，顶部导航栏，左侧分类栏，右侧数据列表

<!-- 导航栏 -->
<scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
  <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
    <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item._id}}</view>
  </view>
</scroll-view>
<view class="container">
  <!-- 左边的  -->
  <scroll-view class='nav_left' scroll-y='true'>
    <block wx:for="{{lefts}}" wx:key="{{index}}">
      <view class="nav_left_items {{leftCur==index?'active':''}}" bindtap="switchLeftTab" data-index='{{index}}'>
        {{item._id}}</view>
    </block>
  </scroll-view>
  <!-- 右边的 -->
  <scroll-view class="nav_right" scroll-y="true">
    <view class="{{topx}}">
      <block wx:for="{{rights}}" wx:key="index">
        <view class="nav_right_items" data-id="{{item._id}}">
          <image src="{{item.touxiang}}"></image>
          <text>{{item.mingzi}}</text>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

/* 导航栏布局相关 */
.navbar {
    width: 100%;
    height: 90rpx;
    /* 文本不换行 */
    white-space: nowrap;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
    background: #fff;
    align-items: center;
    /* 固定在顶部 */
    position: fixed;
    left: 0rpx;
    top: 0rpx;
}

.nav-item {
    padding-left: 25rpx;
    padding-right: 25rpx;
    height: 100%;
    display: inline-block;
    /* 普通文字大小 */
    font-size: 28rpx;
}

.nav-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4rpx;
    box-sizing: border-box;
}

.tab-on {
    color: #000080;
    /* 选中放大 */
    font-size: 38rpx !important;
    font-weight: 600;
    border-bottom: 4rpx solid #000080 !important;
}

/* 正文部分 */
.container {
    position: fixed;
    width: 100%;
    height: 90%;
    top: 100rpx;
    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: #000080;
}

.nav_left .nav_left_items.active::before {
    display: inline-block;
    width: 6rpx;
    height: 60rpx;
    background: #000080;
    content: '';
    position: absolute;
    top: 20rpx;
    left: 0;
}

.nav_right {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 100%;
}

.nav_right .nav_right_items {
    float: left;
    width: 33.33%;
    text-align: center;
    padding: 30rpx 0;
}

.nav_right .nav_right_items image {
    width: 120rpx;
    height: 160rpx;
}

.nav_right .nav_right_items text {
    display: block;
    margin-top: 20rpx;
    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;
}

.topx {
    width: 90%;
    /* height: 700rpx; */
    margin: 30rpx auto;
    z-index: 1;
    border-radius: 10rpx;
    background-size: cover;
}

const db = wx.cloud.database()
const $ = db.command.aggregate
Page({
    data: {
        tabs: [],
        tabCur: 0, //默认选中
        lefts: [],
        leftCur: 0,
        rights: [],

    },
    onLoad: function (options) {
        db.collection('demo').aggregate()
            .group({
                _id: '$louhao'
            })
            .end()
            .then(res => {
                console.log('楼号列表', res)
                this.setData({
                    tabs: res.list
                })
                this.sushehao(res.list[0]._id)
            })
    },
    //加载当前楼号所有的宿舍号
    sushehao() {
        let louhao = this.data.tabs[this.data.tabCur]._id
        db.collection('demo').aggregate()
            .match({
                louhao
            })
            .group({
                _id: '$sushe'
            })
            .sort({
                sushe: -1 //宿舍号升序排列
            })
            .end()
            .then(res => {
                console.log(louhao + '宿舍号列表', res)
                this.setData({
                    lefts: res.list
                })
                this.xuesheng()
            })
    },
    //加载当前宿舍号里所有的学生
    xuesheng() {
        let louhao = this.data.tabs[this.data.tabCur]._id
        let sushe = this.data.lefts[this.data.leftCur]._id
        db.collection('demo')
            .where({
                louhao,
                sushe
            }).get()
            .then(res => {
                console.log(louhao + sushe + '室学生列表', res)
                this.setData({
                    rights: res.data
                })
            })
    },
    //顶部选择分类条目
    tabSelect(e) {
        this.setData({
            tabCur: e.currentTarget.dataset.id,
            scrollLeft: (e.currentTarget.dataset.id - 2) * 200
        }, success => {
            this.sushehao()
        })
    },
    //左侧条目选择
    switchLeftTab(e) {
        let index = e.target.dataset.index;
        this.setData({
            leftCur: index,
        }, success => {
            this.xuesheng()
        })
    },
})