欢迎光临散文网 会员登陆 & 注册

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

2021-03-28 11:52 作者:编程小石头  | 我要投稿

如果大家一直读石头哥的文章,或者看石头哥的视频,肯定知道,石头哥的点餐小程序有实现二级菜品或者商品分类。

如下图


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

一,老规矩,先看效果图


先来给大家分析下原理

二,原理分析

首先来分析下有那三级


可以看出,我们最顶部是一级菜单,左侧是二级菜单,右侧是最终的三级列表。

我们来理一理层级关系

  • =宿舍楼号

  • ====宿舍号

  • ========学生

聪明的人肯定知道,我们是一个宿舍楼里包含很多宿舍,宿舍里有包含很多学生。这样我们的三级就是 楼号》宿舍》学生。

当我们切换楼号时,就会重新获取当前楼号包含的宿舍。
比如下图左为惠兰楼,右为学苑楼的数据,可以看出每个楼里的宿舍和学生信息。


分析完原理,我们就来看技术实现了。

三,获取分类数据

这里先给大家说下,我这里是用一张表来存的所有信息


既然是一张表存所有数据,我们就要做下分组,看数据里都有哪些楼号。

3-1,借助group实现楼号分组(一级数据)


具体代码如下

然后获取到的数据如下


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

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


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


分组后的数据如下


可以看出,前进楼有两个宿舍

3-3,借助where获取宿舍里的学生数据(三级)


获取的数据如下


到这里我们的三级分类就实现了

四,完整项目代码

下面把完整项目代码,贴出来给大家

4-1,wxml

4-2,wxss样式

4-3,js实现分类逻辑

4-4,记得修改数据表权限

修改权限为所有用户可读,仅创建者可读写


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



小程序三级联动,实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表的评论 (共 条)

分享到微博请遵守国家法律