实现类似美团的下拉分级式菜单

简介: 最近要实现如下的下拉式二级目录效果: 思路很简单,左右二级目录其实就是两个UITableView,点击左边cell实现右边table刷新。 关键代码如下:初始化变量:NSInteger _leftIndex;//关键变量,记录一级目录点击cell的index,用来生成二级目录//初始化一二级目录tableview-(void)initsubview{

最近要实现如下的下拉式二级目录效果:
这里写图片描述

思路很简单,左右二级目录其实就是两个UITableView,点击左边cell实现右边table刷新。
关键代码如下:


初始化变量:
NSInteger _leftIndex;//关键变量,记录一级目录点击cell的index,用来生成二级目录

//初始化一二级目录tableview
-(void)initsubview{

     //一级目录
    _leftTableView = [UITableView new];
    [_leftTableView setFrame:CGRectMake(0, 0, screenwith/5*2, self.frame.size.height)];
    _leftTableView.tag = 10;
    _leftTableView.delegate = self;
    _leftTableView.dataSource =self;
    _leftTableView.backgroundColor = [UIColor whiteColor];
    [_leftTableView setTableFooterView:[[UIView alloc] initWithFrame:CGRectZero]];
    [self addSubview:_leftTableView];

    //二级目录
    _rightTableView = [UITableView new];
    [_rightTableView setFrame:CGRectMake(screenwith/5*2, 0, screenwith/5*3, self.frame.size.height)];
    _rightTableView.tag = 20;
    _rightTableView.delegate = self;
    _rightTableView.dataSource =self;
    _rightTableView.separatorStyle=UITableViewCellSelectionStyleNone;
    _rightTableView.backgroundColor = [UIColor whiteColor];
    [self addSubview:_rightTableView];
    self.userInteractionEnabled=YES;

}


//获取目录数据 ,一层二层数据一次性获取 此处是本地获取 一般情况下是网络获取json数据
-(void)getData{

    NSString *newPath=[NSString stringWithFormat:@"%@%@%@",[[NSBundle mainBundle]resourcePath],@"/",@"data"];

    //根据文件路径读取数据
    NSData *jdata = [[NSData alloc]initWithContentsOfFile:newPath];
   // 格式化成json数据
    NSDictionary* jsonObject = [NSJSONSerialization JSONObjectWithData:jdata options:kNilOptions error:nil];
    NSArray* arr = (NSArray*)jsonObject[@"data"];
     _leftArr = [CourseSeries mj_objectArrayWithKeyValuesArray:arr];
     __weak typeof(self) weakself= self;
     //刷新ui要回到主线程
     dispatch_async(dispatch_get_main_queue(), ^{
                    [weakself.leftTableView reloadData];
                });
}

//一级二级菜单cell数目
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if(tableView.tag == 10){
        return [_leftArr count];
    }else {

        if(_leftArr.count==0){
            return 0;
        }
        //根据_leftIndex获取二级菜单数据
        CourseSeries *serie = _leftArr[_leftIndex];
        //二级菜单数目
        return [serie.list count];
    }
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 42;
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    if(tableView.tag==10){
     //一级目录cell实现
        return cell;
    }else {

      //二级目录cell实现 ,注意二级目录的实现要通过全局变量_leftIndex获取初始化数据
        CourseSeries *cs = _leftArr[_leftIndex];
       //cell具体赋值
        return cell;
    }
}

//点击一级二级目录的操作
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    if(tableView.tag == 10){
       //注意全局变量_leftIndex的取值
        _leftIndex = indexPath.row;
       //根据_leftIndex刷新二级目录
        [_rightTableView reloadData];

    }else {
        _rightIndex = indexPath.row;
       //根据_leftIndex获得当前二级目录数据
        CourseSeries* sr = _leftArr[_leftIndex];
       //再根据indexPath定位当前电机的二级目录具体cell
       NSArray* arr = [courseTypeMJ mj_objectArrayWithKeyValuesArray:sr.list];
        courseTypeMJ* ct = arr[indexPath.row];
       //点击二级目录cell的具体操作

    }

}

最终实现效果如下:
这里写图片描述

具体实现效果还要加上遮盖层,可参见上传的demo。
实现效果比较简陋,但是大体效果就是这样。

demo下载:https://github.com/tyrantkemp/XZMenu.git

相关文章
|
7天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
6天前
|
云安全 人工智能 安全
阿里云2026云上安全健康体检正式开启
新年启程,来为云上环境做一次“深度体检”
1621 6
|
2天前
|
消息中间件 人工智能 Kubernetes
阿里云云原生应用平台岗位急招,加入我们,打造 AI 最强基础设施
云原生应用平台作为中国最大云计算公司的基石,现全面转向 AI,打造 AI 时代最强基础设施。寻找热爱技术、具备工程极致追求的架构师、极客与算法专家,共同重构计算、定义未来。杭州、北京、深圳、上海热招中,让我们一起在云端,重构 AI 的未来。
|
3天前
|
存储 人工智能 自然语言处理
OpenSpec技术规范+实例应用
OpenSpec 是面向 AI 智能体的轻量级规范驱动开发框架,通过“提案-审查-实施-归档”工作流,解决 AI 编程中的需求偏移与不可预测性问题。它以机器可读的规范为“单一真相源”,将模糊提示转化为可落地的工程实践,助力开发者高效构建稳定、可审计的生产级系统,实现从“凭感觉聊天”到“按规范开发”的跃迁。
577 11
|
8天前
|
安全 数据可视化 网络安全
安全无小事|阿里云先知众测,为企业筑牢防线
专为企业打造的漏洞信息收集平台
1335 2
|
7天前
|
缓存 算法 关系型数据库
深入浅出分布式 ID 生成方案:从原理到业界主流实现
本文深入探讨分布式ID的生成原理与主流解决方案,解析百度UidGenerator、滴滴TinyID及美团Leaf的核心设计,涵盖Snowflake算法、号段模式与双Buffer优化,助你掌握高并发下全局唯一ID的实现精髓。
366 160
|
7天前
|
人工智能 自然语言处理 API
n8n:流程自动化、智能化利器
流程自动化助你在重复的业务流程中节省时间,可通过自然语言直接创建工作流啦。
451 6
n8n:流程自动化、智能化利器
|
9天前
|
人工智能 API 开发工具
Skills比MCP更重要?更省钱的多!Python大佬这观点老金测了一周终于懂了
加我进AI学习群,公众号右下角“联系方式”。文末有老金开源知识库·全免费。本文详解Claude Skills为何比MCP更轻量高效:极简配置、按需加载、省90% token,适合多数场景。MCP仍适用于复杂集成,但日常任务首选Skills。推荐先用SKILL.md解决,再考虑协议。附实测对比与配置建议,助你提升效率,节省精力。关注老金,一起玩转AI工具。
|
16天前
|
机器学习/深度学习 安全 API
MAI-UI 开源:通用 GUI 智能体基座登顶 SOTA!
MAI-UI是通义实验室推出的全尺寸GUI智能体基座模型,原生集成用户交互、MCP工具调用与端云协同能力。支持跨App操作、模糊语义理解与主动提问澄清,通过大规模在线强化学习实现复杂任务自动化,在出行、办公等高频场景中表现卓越,已登顶ScreenSpot-Pro、MobileWorld等多项SOTA评测。
1625 7
|
5天前
|
IDE 开发工具 C语言
【2026最新】VS2026下载安装使用保姆级教程(附安装包+图文步骤)
Visual Studio 2026是微软推出的最新Windows专属IDE,启动更快、内存占用更低,支持C++、Python等开发。推荐免费的Community版,安装简便,适合初学者与个人开发者使用。
597 10