仿淘宝上拉进入详情页交互的实现
2016-12-08 09:25
162 查看
可以看到,该页面是分为两部分的,一部分是一开始就能看到的商品信息,然后我们上拉屏幕,屏幕不断往上滚动,滚动到第一部分结束时可以看到底部有“继续拖动,查看图文详情”一行文本出现。继续上拉到一个临界点便触发了翻页,此时第二部分以动画的形式从底部涌出占满整个屏幕。而且效果是该页面整体上移了,即第一部分和第二部分都是上移的。
此时,第二部分占满着整个屏幕,若我们下拉屏幕,则在屏幕顶部淡出“下拉,返回宝贝详情”的文本提示,并且达到一个临界值后文本变为“释放,返回宝贝详情”,此时松开手指,页面又滚动到第一部分的尾部。
在自己写的demo中,第一部分是个tableView,展示商品基本信息。第二部分是个webView,展示商品图文详情。
第一步首先加载需要的视图。主要是第一部分的tableView和第二部分的webView,还有第二部分顶部显示上拉返回文本提示的headLab。为了节省资源,其实可以在上拉触发时再加载第二部分视图的,但是这里仅作示例,所以并没有懒加载。
然后实现滚动视图 UIScrollView 的代理方法,在里面完成滚动到达临界值后,触发翻页动画的处理。包括了上拉翻到第二页和下拉翻回第一页两部分,即要在该方法里通过判断scrollView的类型做相应的处理。
此时,第二部分占满着整个屏幕,若我们下拉屏幕,则在屏幕顶部淡出“下拉,返回宝贝详情”的文本提示,并且达到一个临界值后文本变为“释放,返回宝贝详情”,此时松开手指,页面又滚动到第一部分的尾部。
实现
在自己写的demo中,第一部分是个tableView,展示商品基本信息。第二部分是个webView,展示商品图文详情。第一步首先加载需要的视图。主要是第一部分的tableView和第二部分的webView,还有第二部分顶部显示上拉返回文本提示的headLab。为了节省资源,其实可以在上拉触发时再加载第二部分视图的,但是这里仅作示例,所以并没有懒加载。
- (void)loadContentView { // first view [self.contentViewaddSubview:self.tableView]; // second view [self.contentViewaddSubview:self.webView]; UILabel *hv = self.headLab; // headLab [self.webViewaddSubview:hv]; [self.headLabbringSubviewToFront:self.contentView]; } - (UILabel *)headLab { if(!_headLab){ _headLab = [[UILabelalloc] init]; _headLab.text = @"上拉,返回详情"; _headLab.textAlignment = NSTextAlignmentCenter; _headLab.font = FONT(13); } _headLab.frame = CGRectMake(0, 0, PDWidth_mainScreen, 40.f); _headLab.alpha = 0.f; _headLab.textColor = PDColor_button_Gray; return _headLab; } - (UITableView *)tableView { if(!_tableView){ _tableView = [[UITableViewalloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, self.contentView.bounds.size.height) style:UITableViewStylePlain]; // _tableView.contentSize = CGSizeMake(PDWidth_mainScreen, 800); _tableView.dataSource = self; _tableView.delegate = self; _tableView.rowHeight = 40.f; UILabel *tabFootLab = [[UILabelalloc] initWithFrame:CGRectMake(0, 0, PDWidth_mainScreen, 60)]; tabFootLab.text = @"继续拖动,查看图文详情"; tabFootLab.font = FONT(13); tabFootLab.textAlignment = NSTextAlignmentCenter; // tabFootLab.backgroundColor = PDColor_Orange; _tableView.tableFooterView = tabFootLab; } return _tableView; } - (UIWebView *)webView { if(!_webView){ _webView = [[UIWebViewalloc] initWithFrame:CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen)]; _webView.delegate = self; _webView.scrollView.delegate = self; [_webViewloadRequest:[NSURLRequestrequestWithURL:[NSURLURLWithString:@"https://www.baidu.com"]]]; } return _webView; }
然后实现滚动视图 UIScrollView 的代理方法,在里面完成滚动到达临界值后,触发翻页动画的处理。包括了上拉翻到第二页和下拉翻回第一页两部分,即要在该方法里通过判断scrollView的类型做相应的处理。
#pragma mark ---- scrollView delegate -(void)scrollViewDidEndDragging:(UIScrollView *)scrollViewwillDecelerate:(BOOL)decelerate { CGFloatoffsetY = scrollView.contentOffset.y; if([scrollViewisKindOfClass:[UITableViewclass]]) // tableView界面上的滚动 { // 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度 CGFloatvalueNum = _tableView.contentSize.height -PDHeight_mainScreen; if ((offsetY - valueNum) > _maxContentOffSet_Y) { [self goToDetailAnimation]; // 进入图文详情的动画 } } else // webView页面上的滚动 { NSLog(@"-----webView-------"); if(offsetY_maxContentOffSet_Y) { [self backToFirstPageAnimation]; // 返回基本详情界面的动画 } } }
相关文章推荐
- 仿淘宝上拉进入详情页交互的实现
- iOS实现淘宝上拉进入详情页交互效果
- 仿淘宝上拉进入详情页交互的实现
- 仿淘宝上拉进入详情页交互的实现
- Vue模拟数据,实现路由进入商品详情页面
- 简单实现discuz投票选项文字添加链接进入查看详情
- 关于jquer实现淘宝物品详情栏切换展示的简单操作
- android 自定义ViewGroup实现仿淘宝的商品详情页
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
- iOS 仿淘宝,上拉进入详情页面
- 原生javascript防淘宝商品详情实现放大镜效果
- iOS 相似淘宝商品详情查看翻页效果的实现
- 今天实现了类似淘宝上划操作显示详情页的demo
- 实现淘宝商品详情页toolbar 渐变、状态栏沉浸
- 实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能
- 淘宝产品详情页 上拉加载图片详情 效果实现
- 自定义ViewGroup实现仿淘宝的商品详情页
- iOS 类似淘宝商品详情查看翻页效果的实现
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
- iOS项目开发--实现类似淘宝详情页面