文档章节

外卖App双列表联动

杭城小刘
 杭城小刘
发布于 2017/09/24 16:04
字数 820
阅读 9
收藏 0
点赞 0
评论 0

双列表联动

用过了那么多的外卖App,总结出一个规律,那就是“所有的外卖App都有双列表联动功能”。哈哈哈哈,这是一个玩笑。

这次我也需要开发具有联动效果的双列表。也是首次开发这种类型的UI,记录下步骤与心得

一、关键思路

  • 懒加载左右2个UITableView
  • 根据需要自定义Cell
  • 2个UITableView加载到界面上的时候注意下部剧就好
  • 因为需要联动效果,所有左侧的UITableView一般是大的分类,右边的UITableView一般是大分类小的小分类,所以有了这样的特点
    • 左边的UITableView是只有1个section和n个row
    • 右边的UITableView具有n个section(这里的section 个数恰好是左边UITableView的row数量),且每个section下的row由对应的数据源控制

二、第一版代码

#pragma mark -- UITableViewDelegate
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    if (tableView == self.leftTablview) {
        return 1;
    }
    return self.datas.count;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if (tableView == self.leftTablview) {
        return self.datas.count;
    }
    QuestionCollectionModel *model = self.datas[section];
    NSArray *questions =model.questions;
    return questions.count;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView == self.leftTablview) {
        return LeftCellHeight;
    }
    return RightCellHeight;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView == self.leftTablview) {
        PregnancyPeriodCell *cell = [tableView dequeueReusableCellWithIdentifier:PregnancyPeriodCellID forIndexPath:indexPath];
        if (self.collectionType == CollectionType_Wrong || self.collectionType == CollectionType_Miss) {
            QuestionCollectionModel *model = self.datas[indexPath.row];
            cell.week = model.tag;
        }

        return cell;
    }
    QuestionCell *cell = [tableView dequeueReusableCellWithIdentifier:QuestionCellID forIndexPath:indexPath];
    QuestionCollectionModel *model = self.datas[indexPath.section];
    NSArray *questions =model.questions;
    QuestionModel *questionModel = questions[indexPath.row];
    cell.model = questionModel;
    return cell;
}


-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView == self.leftTablview) {
        NSIndexPath *indexpath = [NSIndexPath indexPathForRow:0 inSection:indexPath.row];
        [self.rightTableview scrollToRowAtIndexPath:indexpath atScrollPosition:UITableViewScrollPositionTop animated:YES];
    }
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (scrollView == self.rightTableview) {
        NSIndexPath *indexpath = [self.rightTableview indexPathsForVisibleRows].firstObject;
        NSIndexPath *leftScrollIndexpath = [NSIndexPath indexPathForRow:indexpath.section inSection:0];
        [self.leftTablview selectRowAtIndexPath:leftScrollIndexpath animated:YES scrollPosition:UITableViewScrollPositionMiddle];

    }
}

缺陷:虽然实现了效果,但是有缺陷。点击左侧的UITableView,右侧的UITableViewe滚动到相应的位置,这是没问题的,但是滚动

右边,需要根据右边indexPath.section将选中左侧相应的indexPath。这样左侧选中的时候,又会触发右边滚动的事件,整体看上去不是很流畅。

三、解决方案

观察了下,发现右侧滚动的时候左侧会上下选中,所以也就是只要让右侧滚动的时候,左侧的UITableView单方向选中,不要滚动就好,所以由于UITableView也是UIScrollview,所以在scrollViewDidScroll方法中判断右侧的UITableView是向上还是向下滚动,以此作为判断条件来让左侧的UITableView选中相应的行。

且之前是在scrollview代理方法中让左侧的tableview选中,这样子又会触发左侧tableview的选中事件,从而导致右侧的tablview滚动,造成不严谨的联动逻辑

改进后的方法:

  1. 点击左侧的UITableView,在代理方法didSelectRowAtIndexPath中拿到相应的indexPath.row,计算出右侧UITableView需要滚动的indexPath的位置。
     [self.rightTableview scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES];
    
  2. 在willDisplayCell和didEndDisplayingCell代理方法中选中左侧UITableView相应的行。
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{

    if (tableView == self.rightTableview  && !self.isScrollDown && self.rightTableview.isDragging ) {
        [self.leftTablview selectRowAtIndexPath:[NSIndexPath indexPathForRow:indexPath.section inSection:0] animated:YES scrollPosition:UITableViewScrollPositionTop];
    }
}



-(void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView == self.rightTableview && self.isScrollDown && self.rightTableview.isDragging) {
        [self.leftTablview selectRowAtIndexPath:[NSIndexPath indexPathForRow:indexPath.section+1 inSection:0] animated:YES scrollPosition:UITableViewScrollPositionTop];

    }
}


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
    if (self.leftTablview == tableView)
    {
        [self.rightTableview scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES];
    }else{
        NSLog(@"嗡嗡嗡");
    }
}


#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

    static CGFloat lastOffsetY = 0;

    UITableView *tableView = (UITableView *)scrollView;
    if (self.rightTableview == tableView){
        self.isScrollDown = (lastOffsetY < scrollView.contentOffset.y);
        lastOffsetY = scrollView.contentOffset.y;
    }

}
效果图

效果图

附上Demo:Demo

© 著作权归作者所有

共有 人打赏支持
杭城小刘
粉丝 14
博文 108
码字总数 47960
作品 0
杭州
iOS工程师
WeX5 V3.4 预览版发布,快速开发平台

WeX5v3.4Pre(Windows/Mac) 下载地址: http://pan.baidu.com/s/1jGZoAMy WeX5 V3.4预览版较抢鲜版做了如下更新: 1、新增com.justep.cordova.plugin.touchid 指纹识别插件,只支持iOS; 2、...

muyu ⋅ 2016/03/22 ⋅ 6

智察大数据:2018年1月饿了么、美团外卖对比报告

  2017年外卖行业经历了一系列变革。年初各外卖平台迎来大量融资,在业务快速扩张的同时,也引发一系列食品安全问题,国家监管部门迅速应对,陆续推出多项文件规范外卖市场。阿里巴巴集团加...

智察大数据 ⋅ 03/23 ⋅ 0

WeX5 快速开发平台 V3.4 正式版发布

WeX5 V3.4 正式版下载地址 http://pan.baidu.com/s/1jHBUDtc WeX5 V3.4正式版发布说明: 1、新增移动端模板32个:包括首页、数据列表、数据展示、注册、登录、搜索等常用单页面模板和完整应用...

muyu ⋅ 2016/04/01 ⋅ 17

外卖点餐APP开发的解决方案

  打包形式是最早出现的外卖形式,虽然古老,却延续至今。随着电话、手机、网络的普及,外卖行业得到迅速的发展。现在外卖已经不是一般的火了,市场份额也占据很大一部分,毕竟大家天天都是...

APP开发那些事儿 ⋅ 2017/09/23 ⋅ 0

Wex5 3.3版本外卖教程

外卖数据交互 外卖概述 第一讲 搭建页面框架 第二讲 开发菜品列表页 第三讲 开发购物车页 第四讲 开发我的信息页 第五讲 开发订单页 第六讲 细节处理 第七讲 开发后端服务 第八讲 在App中支付...

muyu ⋅ 2016/01/17 ⋅ 0

基于Vue全家桶制作的的高仿美团APP

鸣谢:该项目核心部分参考了慕课网精英讲师ustbhuangyi的课程,其余部分高仿美团APP构建。 前端菜鸟项目,大佬们轻喷~ 美团外卖APP 👉 项目演示地址:http://39.108.232.27:9000 👉 GitH...

白小明 ⋅ 2017/09/13 ⋅ 0

饿了么CTO雪峰:“拔错网线太离谱...”

谣言从这里产生 饿了么CTO张雪峰12月6号的一条朋友圈:饿了么开始做IDC断开测试...,史无前例... 然鹅12月7日中午,有网友爆料称 自己在“美团”点了外卖 然而 下了单付了钱,却一直显示没付...

k6t9q8xks6iikzppifq ⋅ 2017/12/07 ⋅ 0

微信小程序-商品列表右=>左联动(二)

上一篇:《微信小程序-商品列表左=>右联动(一)》 上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示 ...

刘飞_ ⋅ 2017/09/23 ⋅ 0

饿了么再添堵 百度外卖董事长巩振兵离职

  智察网讯 深陷被阿里收编漩涡,饿了么再添一堵。3月20日消息,针对百度外卖董事长巩振兵离职的消息,今天,饿了么官方做了确认,并称“感谢巩振兵先生在百度外卖创立至今所做出的贡献,彼...

智察大数据 ⋅ 03/20 ⋅ 0

“饿了么+百度外卖”稳居第一 易观报告揭晓外卖下半场核心趋势

日前,易观发布的数据显示,2017年第3季度,中国互联网餐饮外卖市场整体交易规模达582.7亿元人民币,环比上涨26.8%,与去年同期相比,增幅达79.1%。在竞争格局方面,饿了么+百度外卖的市场交...

张书乐 ⋅ 2017/11/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

容器之重命名镜像

使用docker tag命令来重命名镜像名称,先执行help,查看如何使用如下 mjduan@mjduandeMacBook-Pro:~/Docker % docker tag --helpUsage:docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TA...

汉斯-冯-拉特 ⋅ 29分钟前 ⋅ 0

with 的高级用法

那么 上下文管理器 又是什么呢? 上下文管理器协议包含 __enter__ 和 __exit__ 两个方法。with 语句开始运行时,会在上下文管理器对象上调用 __enter__ 方法。with 语句运行结束后,会在上下...

阿豪boy ⋅ 48分钟前 ⋅ 0

使用 jsoup 模拟登录 urp 教务系统

需要的 jsoup 相关 jar包:https://www.lanzous.com/i1abckj 1、首先打开教务系统的登录页面,F12 开启浏览器调试,注意一下 Request Headers 一栏的 Cookie 选项,我们一会需要拿这个 Cook...

大灰狼时间 ⋅ 48分钟前 ⋅ 0

关于线程的创建

转自自己的笔记: http://note.youdao.com/noteshare?id=87584d4874acdeaf4aa027bdc9cb7324&sub=B49E8956E145476191C3FD1E4AB40DFA 1.创建线程的方法 Java使用Thread类代表线程,所有的线程对......

MarinJ_Shao ⋅ 59分钟前 ⋅ 0

工厂模式学习

1. 参考资料 工厂模式-伯乐在线 三种工厂-思否 深入理解工厂模式 2. 知识点理解 2.1 java三种工厂 简单工厂 工厂模式 抽象工厂 2.2 异同点 逐级复杂 简单工厂通过构造时传入的标识来生产产品...

liuyan_lc ⋅ 今天 ⋅ 0

Java NIO

1.目录 Java IO的历史 Java NIO之Channel Java NIO之Buffer Java NIO之Selector Java NIO之文件处理 Java NIO之Charset Java 可扩展IO 2.简介 “IO的历史”讲述了Java IO API从开始到现在的发...

士别三日 ⋅ 今天 ⋅ 0

[Err] ORA-24344: success with compilation error

从txt文本复制出创建function的脚本,直接执行,然后报错:[Err] ORA-24344: success with compilation error。 突然发现脚本的关键字,居然不是高亮显示。 然后我把脚本前面的空格去掉,执行...

wenzhizhon ⋅ 今天 ⋅ 0

Spring Security授权过程

前言 本文是接上一章Spring Security认证过程进一步分析Spring Security用户名密码登录授权是如何实现得; 类图 调试过程 使用debug方式启动https://github.com/longfeizheng/logback该项目,...

hutaishi ⋅ 今天 ⋅ 0

HAProxy基于KeepAlived实现Web高可用及动静分离

前言 软件负载均衡一般通过两种方式来实现: 基于操作系统的软负载实现 基于第三方应用的软负载实现 LVS是基于Linux操作系统实现的一种软负载,而HAProxy则是基于第三方应用实现的软负载。 ...

寰宇01 ⋅ 今天 ⋅ 0

微软自研处理器的小动作:已经开始移植其他平台的工具链

微软将 Windows 10 、Linux 以及工具链如 C/C++ 和 .NET Core 运行时库、Visual C++ 2017 命令行工具、RyuJIT 编辑器等移植到其自主研发的处理器架构 E2。微软还移植了广泛使用的 LLVM C/C++...

linux-tao ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部