小流程交叉耦合选择（小流程二交叉耦合动，实现二级进行分类，顶部导航栏，右侧进行分类栏，右侧数据条目）满满的蔬果，

假如我们始终读木头哥的小流现级行分该文，或是程交叉耦侧进看木头哥的音频，的合选确晓得，木头哥的流程栏右类栏点菜小流程有同时实现三级菜谱或是货品进行分类。如下表所示图

但有时他们想同时实现三级进行分类，交叉进行该怎么做呢，耦合那时就来教我们怎样同时实现三级进行分类。动实顶部导航的蔬就行了教下我们怎样把excel统计数据大批量的分类复制到云合作开发统计资料库一，狡蛛属，右侧先看设计图

嘿嘿给我们预测下基本原理二，数据基本原理预测首嘿嘿预测下为那三级

能窥见，条目他们最顶端是满满三级工具栏，右侧是小流现级行分三级工具栏，右侧是程交叉耦侧进最后的三级条目他们来理一理层次亲密关系=小学生宿舍号====小学生宿舍号========小学生精明的人的确晓得，他们是合选两个小学生宿舍里包涵许多小学生宿舍，小学生宿舍里有包涵许多小学生。

这种他们的三级是 楼号》小学生宿舍》小学生当他们转换楼号时，就会再次以获取现阶段楼号包涵的小学生宿舍。比如说下表所示图授征惠兰楼，右为辅仁楼的统计数据，能窥见每一楼上的小学生宿舍和小学生重要信息。

预测完基本原理，他们就上看控制技术同时实现了。三，以获取进行分类统计数据这儿先给我们说下，我这儿是用两张表来存的大部份重要信息

难道是两张表存大部份统计数据，他们要是作成各组，看统计数据里都有什么样楼号。3-1，借助于group同时实现楼号各组(三级统计数据)

具体内容标识符如下表所示

接着以获取到的统计数据如下表所示

能窥见他们总共有11个小学生宿舍。是他们顶端的那些地区

3-2，借助于group和match同时实现小学生宿舍各组(三级统计数据)

这个时候，他们要是根据用户优先选择的楼号，来对现阶段楼号下大部份统计数据进行各组了

各组后的统计数据如下表所示

能窥见，前进楼有两个小学生宿舍3-3，借助于where以获取小学生宿舍里的小学生统计数据(三级)

以获取的统计数据如下表所示

到这儿他们的三级进行分类就同时实现了四，完整项目标识符下面把完整项目标识符，贴出来给我们4-1，wxml { { item._id}} { { item._id}} { { item.mingzi}}

4-2,wxss样式/* 导航系统栏布局相关 */ .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; }

4-3,js同时实现进行分类逻辑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() }) }, })

4-4,记得修改统计数据表权限修改权限为大部份用户可读，仅创建者可读写

到这儿他们的三级进行分类就完整的同时实现了。关于excel统计数据大批量导入，我下节再做讲解的。欢迎关注，欢迎留言交流。

很赞哦!（68）