//
// 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_仿淘宝商品详情页的翻页的更多相关文章

  1. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  2. 仿淘宝商品详情页上拉弹出新ViewController

    新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...

  3. iOS app url scheme跳转到淘宝商品详情页 唤醒app

    最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...

  4. Android自己定义控件实战——仿淘宝商品浏览界面

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...

  5. Android自定义控件实战——仿淘宝商品浏览界面

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...

  6. Android开发案例 - 淘宝商品详情

    所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPa ...

  7. Android开发案例 - 淘宝商品详情【转】

    http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等 ...

  8. android仿京东、淘宝商品详情页上拉查看详情

    话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...

  9. 仿京东淘宝商品详情页属性选择js效果

    在网上找了好久发现都不符合要求就自己摸索写了一个,用到了linq.js这个linq to js 扩展,不然用纯JS遍历json查询要死人啊 demo:http://123.207.28.46:8086 ...

随机推荐

  1. Zabbix之CentOS7.3下yum安装Zabbix3.5

    Zabbix特点介绍 (此介绍来源于https://www.zabbix.com/documentation/3.4/zh/manual/introduction/features) 概述Zabbix ...

  2. 练习十六:Python日期格式应用(datetime)

    练习:关于python日期格式应用练习.用python方法如何输出指定格式形式的日期 这里用到datetime模块,datetime模块重新封装了time模块,提供了更多接口,提供的类包括:date, ...

  3. 006 ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  4. C++学习 - 虚表,虚函数,虚函数表指针学习笔记

    http://blog.csdn.net/alps1992/article/details/45052403 虚函数 虚函数就是用virtual来修饰的函数.虚函数是实现C++多态的基础. 虚表 每个 ...

  5. lecture-7 递归

    1.例题--排列 Permutation Given a collection of distinct numbers, return all possible permutations.For ex ...

  6. 【Unity3D/C#】Unity3D中的Coroutine详解

    Unity中的coroutine是通过yield expression;来实现的.官方脚本中到处会看到这样的代码. 疑问: yield是什么? Coroutine是什么? unity的coroutin ...

  7. 熟悉servlet的页面跳转

    jspweb里面用到的servlet跳转页面的方法 使用的jar包只有 commons-lang3-3.5.jar 运行时,tomcat会先根据web.xml里面的信息,查找servlet <? ...

  8. RS485相关学习

    TIA-485-A (Revision of EIA-485) Standard ANSI/TIA/EIA-485-A-1998Approved: March 3, 1998Reaffirmed: M ...

  9. .net笔试题一(简答题)

    1. 简述 private. protected. public. internal 修饰符的访问权限答:private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类 ...

  10. Linux常用命令汇总(渐更)

    后台启动jar nohup java -jar xxxxx.jar > xxxx.out 2>&1 & 封禁ip iptables -I INPUT -s 200.194. ...