IOS 仿饿了么点餐页面效果—因时间原因界面不好看 但滑动效果已经实现


最近一个项目涉及到类似于饿了么的点餐页面,百度好久没找到合适的Demo 只好动手写一个。现在上代码,感兴趣的伙伴可以看一下,如出现BUG或有更好的建议欢迎提给我:1614056471

1.先说下点餐页的难点:理清“主tableview”什么时候不能往上滑 什么时候不能往下滑  主tableview cell里面嵌套的tableView什么时候不能往下滑 什么时候不能往上滑 只要将上滑、下滑的限制条件理清,整个点餐功能就不难做了


2.先看一下demo的整体结构:整个点餐功能分成了三个控制器(为了方便管理tableView代理)“点菜”的相关功能实现全部放到了“点餐控制器”,“商家”的相关功能实现全部放到了“商家控制器”  “主控制器”对另外两个字控制器进行管理。

3.主控制器(ELeMeOrderPageViewMainController)里面的关键代码:/**

UIScrollViewDelegate

*/

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

if([scrollViewisEqual:self.mainTableView]) {

//

//NSLog(@"%lf, %lf", scrollView.contentOffset.y, scrollView.contentSize.height-scrollView.bounds.size.height);

if(scrollView.contentOffset.y>= (scrollView.contentSize.height-scrollView.bounds.size.height-0.5)) {//mainTableView滚动不能超过最大值

self.offsetType=OffsetTypeMax;

scrollView.contentOffset=CGPointMake(scrollView.contentOffset.x, scrollView.contentSize.height-scrollView.bounds.size.height);//(scrollView.contentSize.height-scrollView.bounds.size.height):mainTableView可以滚动的最大偏移距离超过等于最大偏移距离不可以再向上滑动

_mainTableViewOldOffSet= scrollView.contentSize.height-scrollView.bounds.size.height;

}elseif(scrollView.contentOffset.y<=0) {

self.offsetType=OffsetTypeMin;

}else{

self.offsetType=OffsetTypeCenter;

}

if((self.levelListView.selectedIndex==0&&self.subLeftVC.offsetType!=OffsetTypeMin)&&(self.subLeftVC.rightTVScrollDown||(scrollView.contentOffset.y-_mainTableViewOldOffSet<0))) {//self.subLeftVC.offsetType != OffsetTypeMin时_mainTableView不能向下滑动(注释:当点菜页面显示并且商品列表tableView未达到最大偏移量之前,mainTableView不能向下滑动)

scrollView.contentOffset=CGPointMake(scrollView.contentOffset.x,_mainTableViewOldOffSet);

}

if(self.levelListView.selectedIndex==1&&self.subRightVC.offsetType!=OffsetTypeMin) {//当商家页面显示时,商家信息tableview偏移量不是最小状态说明mainTableView已经滚动到了最大值在商家信息tableview偏移量未达到最小偏移量之前mainTableView需要保持原来的偏移量不变

scrollView.contentOffset=CGPointMake(scrollView.contentOffset.x,_mainTableViewOldOffSet);

}

_mainTableViewOldOffSet= scrollView.contentOffset.y;

}

if([scrollViewisEqual:self.subScrollView]) {

[self.levelListViewchangeLineViewOffsetX:self.subScrollView.contentOffset.x];

}

}

4.点餐控制器(ELeMeOrderPageLeftViewController)关键代码:

#pragma mark --- UIScrollViewDelegate ---

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

ELeMeOrderPageViewMainController*vc = (ELeMeOrderPageViewMainController*)[selfparentViewController];//父控制器

NSLog(@"aaaaaaaaaaaaaa=====%f",scrollView.contentOffset.y);

if(scrollView==self.rightTableView&&!_didSelectLeftTVCell) {

if(scrollView.contentOffset.y<=0) {//rightTableView不能小于最小值(不能下滑的条件)

self.offsetType=OffsetTypeMin;

scrollView.contentOffset=CGPointZero;

}else{

self.offsetType=OffsetTypeCenter;

}

//联动逻辑:rightTableViews顶部section头消失出现实现leftTableView选择联动

if(scrollView.contentOffset.y>_oldRightOffsetY) {

_rightTVScrollUp=YES;

_rightTVScrollDown=!_rightTVScrollUp;

}elseif(scrollView.contentOffset.y<_oldRightOffsetY)

{

_rightTVScrollUp=NO;

_rightTVScrollDown=!_rightTVScrollUp;

}

if(vc.offsetType!=OffsetTypeMax&&_rightTVScrollUp) {//vc.offsetType!= OffsetTypeMax时rightTableView不能向上滑动(不能上滑的条件)

scrollView.contentOffset=CGPointMake(0,_oldRightOffsetY);

}

if(vc.offsetType==OffsetTypeMax) {

}

NSLog(@"ccccccccccc=====%f",scrollView.contentOffset.y);

_oldRightOffsetY=floorf(scrollView.contentOffset.y);

}

}

5.商家控制器里的关键代码与上面类似,不再累述,实现滑动效果还有一个重要的点:当滑动作用到商品列表tableView或商家信息tableview上时,主控控制器主tableview也必须能响应滑动,因此继承商品列表tableView 与商家信息tableview 都继承了LWGesturePenetrationTableView,LWGesturePenetrationTableView:里实现的方法#pragma mark --- other ---

- (BOOL)gestureRecognizer:(UIGestureRecognizer*)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(nonnullUIGestureRecognizer*)otherGestureRecognizer

{

returnYES;

}

6.这是我目前想到的实现方法,要是有更好的实现欢迎分享,具体实现下载demo吧,纯原创 希望在git上给颗星。


demo下载地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容