第十二篇、OC_仿淘宝商品详情页的翻页
//
// GFBProductViewController.m
// elmsc
//
// Created by MAC on 2016/11/26.
// Copyright © 2016年 GFB Network Technology Co.,Ltd. All rights reserved.
// #import "GFBProductViewController.h" #define kScreentW [UIScreen mainScreen].bounds.size.width
#define kScreentH [UIScreen mainScreen].bounds.size.height
#define _maxContentOffSet_Y 30
#define offsetY_maxContentOffSet_Y -30 @interface GFBProductViewController ()<UITableViewDelegate,UITableViewDataSource,UIWebViewDelegate> @property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) UIView *contentView;
@property (nonatomic, strong) UILabel *mesLabel;
@property (nonatomic, assign) CGFloat startOffsetY; @end @implementation GFBProductViewController - (void)loadContentView
{
// first view
[self.contentView addSubview:self.tableView]; // second view
[self.contentView addSubview:self.webView]; UILabel *hv = self.headLab;
// headLab
[self.webView addSubview:hv];
[self.headLab bringSubviewToFront:self.contentView]; // 开始监听_webView.scrollView的偏移量
[_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
} - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"])
{
NSLog(@"----old:%@----new:%@",change[@"old"],change[@"new"]);
[self headLabAnimation:[change[@"new"] CGPointValue].y];
}else
{
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
} } // 头部提示文本动画
- (void)headLabAnimation:(CGFloat)offsetY
{
_mesLabel.alpha = -offsetY/;
_mesLabel.center = CGPointMake(kScreentW/, -offsetY/.f);
// 图标翻转,表示已超过临界值,松手就会返回上页
if(-offsetY>_maxContentOffSet_Y){
_mesLabel.textColor = [UIColor redColor];
_mesLabel.text = @"释放,返回详情";
}else{
_mesLabel.textColor = [UIColor redColor];
_mesLabel.text = @"上拉,返回详情";
}
} - (UIView *)contentView
{
if (! _contentView) { _contentView = [[UIView alloc]initWithFrame:CGRectMake(, , kScreentW, kScreentH)];
[self.view addSubview:_contentView];
}
return _contentView;
}
- (UILabel *)headLab
{
if(!_mesLabel){
_mesLabel = [[UILabel alloc] init];
_mesLabel.text = @"上拉,返回详情";
_mesLabel.textAlignment = NSTextAlignmentCenter;
_mesLabel.font = [UIFont systemFontOfSize:]; } _mesLabel.frame = CGRectMake(, , kScreentW, .f);
_mesLabel.alpha = .f;
_mesLabel.textColor = [UIColor redColor]; return _mesLabel;
} - (UITableView *)tableView
{
if(!_tableView){
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(, , kScreentW, self.contentView.bounds.size.height) style:UITableViewStylePlain];
// _tableView.contentSize = CGSizeMake(PDWidth_mainScreen, 800);
_tableView.dataSource = self;
_tableView.delegate = self;
_tableView.rowHeight = .f;
UILabel *tabFootLab = [[UILabel alloc] initWithFrame:CGRectMake(, , kScreentW, )];
tabFootLab.text = @"继续拖动,查看图文详情";
tabFootLab.font = [UIFont systemFontOfSize:];
tabFootLab.textAlignment = NSTextAlignmentCenter;
// tabFootLab.backgroundColor = PDColor_Orange;
_tableView.tableFooterView = tabFootLab;
} return _tableView;
} - (UIWebView *)webView
{
if(!_webView){
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(, _tableView.contentSize.height, kScreentW, kScreentH)];
_webView.delegate = self;
_webView.scrollView.delegate = self;
[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
} return _webView;
} - (void)viewDidLoad {
[super viewDidLoad];
[self setUpUI]; } #pragma mark---Private Methods 私有方法
- (void) setUpUI
{
[self loadContentView];
} #pragma mark-UITableViewDatasource Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return ;
} -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *ID = @"ID";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (! cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
cell.textLabel.text = @"商品测试";
return cell;
} #pragma mark--UITableViewDelegate Methods
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
// 测试跳转
UIViewController *vc = [UIViewController new];
vc.view.backgroundColor = [UIColor whiteColor];
[self.navigationController pushViewController:vc animated:YES];
} // 进入详情的动画
- (void)goToDetailAnimation
{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_webView.frame = CGRectMake(, , kScreentW, kScreentH);
_tableView.frame = CGRectMake(, -self.contentView.bounds.size.height, kScreentW, self.contentView.bounds.size.height);
} completion:^(BOOL finished) { }];
} // 返回第一个界面的动画
- (void)backToFirstPageAnimation
{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_tableView.frame = CGRectMake(, , kScreentW, self.contentView.bounds.size.height);
_webView.frame = CGRectMake(, _tableView.contentSize.height, kScreentW, kScreentH); } completion:^(BOOL finished) {
// 滑动回顶部
[_webView.scrollView setContentOffset:CGPointZero]; }];
} #pragma mark ---- scrollView delegate -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
self.startOffsetY = scrollView.contentOffset.y;
} -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
CGFloat offsetY = scrollView.contentOffset.y; if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滚动
{
// 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度
CGFloat valueNum = _tableView.contentSize.height -kScreentH;
if ((offsetY - valueNum) > _maxContentOffSet_Y)
{
[self goToDetailAnimation]; // 进入图文详情的动画
}
} else // webView页面上的滚动
{
NSLog(@"-----webView-------");
if (_startOffsetY < offsetY) { // 如果webView向上滑动则返回
return;
}
if(offsetY_maxContentOffSet_Y)
{
[self backToFirstPageAnimation]; // 返回基本详情界面的动画
}
}
} - (void)dealloc
{
[self.webView.scrollView removeObserver:self forKeyPath:@"contentOffset" context:nil ];
}
@end
第十二篇、OC_仿淘宝商品详情页的翻页的更多相关文章
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- 仿淘宝商品详情页上拉弹出新ViewController
新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...
- iOS app url scheme跳转到淘宝商品详情页 唤醒app
最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...
- Android自己定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...
- Android自定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...
- Android开发案例 - 淘宝商品详情
所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPa ...
- Android开发案例 - 淘宝商品详情【转】
http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等 ...
- android仿京东、淘宝商品详情页上拉查看详情
话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...
- 仿京东淘宝商品详情页属性选择js效果
在网上找了好久发现都不符合要求就自己摸索写了一个,用到了linq.js这个linq to js 扩展,不然用纯JS遍历json查询要死人啊 demo:http://123.207.28.46:8086 ...
随机推荐
- thinkphp5更新时验证数据
在编辑页面form表单中添加一个隐藏域:<input type="hidden" name="表中id字段名" value="get方式传过来的 ...
- Exadata中的dbserver_backup.sh脚本
dbserver_backup.sh脚本在老版本的exadata中,它存放在/opt/oracle.SupportTools目录中,主要用于/根文件系统和/boot分区的备份.dbserver_bac ...
- 消息中间件的研究 (四)RabbitMQ、Kafka、RocketMQ消息中间件的对比及分析
RabbitMQ: RabbitMQ是使用Erlang语言开发的开源消息队列系统,基于AMQP协议来实现.AMQP的主要特征是面向消息.队列.路由(包括点对点和发布/订阅).可靠性.安全.AM ...
- Javascript专题(一)严格模式
严格模式是干什么的?它从哪里来? ECMAScript5中引入了严格模式.它为JS定义了一种不同的解析和执行模型. 摘自阮一峰博客:http://www.ruanyifeng.com/blog/201 ...
- windows srver 显示桌面图标。
rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0
- centos服务器nginx相关命令
1.找到nginx路径: ps aux | grep nginx -> /usr/local/nginx/sbin/nginx 2.nginx配置检查: /usr/local/nginx/sbi ...
- placeholder-shown
一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是 CSS伪类表示任何显示占位符文本的form元素. 简单来说就 ...
- 记一次序列化的JSON解析问题
目录 一.问题初探 二.问题原因 三.解决问题 一.问题初探 我今天在使用Ribbon 远程调用的时候 消费者去消费服务端所提供的服务,在使用Post请求中的PostForEntity传递参数的时候, ...
- java 多线程之取消与关闭
要使线程安全,快速,可靠的停下来并不是一件容易的事情.java并没有提供任何机制来安全的终止线程.但是java提供了中断(interrupt)使一个线程可以终止另一个线程的当前工作 每个线程都有一个b ...
- 提高jquery加载速率(有cdn就加载,没有就加载本地)
<!-- Adds google cdn reference --> <script src="https://cdn.bootcss.com/jquery/3.2.1/j ...