小程序三级联动,实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
如果大家一直读石头哥的文章,或者看石头哥的视频,肯定知道,石头哥的点餐小程序有实现二级菜品或者商品分类。
如下图

但是有时候我们想实现三级分类,该怎么做呢,今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库
一,老规矩,先看效果图

先来给大家分析下原理
二,原理分析
首先来分析下有那三级

可以看出,我们最顶部是一级菜单,左侧是二级菜单,右侧是最终的三级列表。
我们来理一理层级关系
=宿舍楼号
====宿舍号
========学生
聪明的人肯定知道,我们是一个宿舍楼里包含很多宿舍,宿舍里有包含很多学生。这样我们的三级就是 楼号》宿舍》学生。
当我们切换楼号时,就会重新获取当前楼号包含的宿舍。
比如下图左为惠兰楼,右为学苑楼的数据,可以看出每个楼里的宿舍和学生信息。

分析完原理,我们就来看技术实现了。
三,获取分类数据
这里先给大家说下,我这里是用一张表来存的所有信息

既然是一张表存所有数据,我们就要做下分组,看数据里都有哪些楼号。
3-1,借助group实现楼号分组(一级数据)

具体代码如下

然后获取到的数据如下

可以看出我们一共有11个宿舍楼。就是我们顶部的这些区域

3-2,借助group和match实现宿舍分组(二级数据)

这个时候,我们就要根据用户选择的楼号,来对当前楼号下所有数据进行分组了

分组后的数据如下

可以看出,前进楼有两个宿舍
3-3,借助where获取宿舍里的学生数据(三级)

获取的数据如下

到这里我们的三级分类就实现了
四,完整项目代码
下面把完整项目代码,贴出来给大家
4-1,wxml
4-2,wxss样式
4-3,js实现分类逻辑
4-4,记得修改数据表权限
修改权限为所有用户可读,仅创建者可读写

到这里我们的三级分类就完整的实现了。关于excel数据批量导入,我下节再做讲解的。欢迎关注,欢迎留言交流。