第十二篇、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 ...
随机推荐
- 分别使用http,express,koa请求第三方接口
今天又再次恶补了一下http的内容,确切地说是node.js里面的http的内容,啊,百度了半天express怎么请求第三方接口,结果发现自己买的入门书籍都有这个内容.舍近求远,我真是醉了.还有百度上 ...
- angularJs1.x 版本中 uib-tabset 如何默认激活不同的标签页
<uib-tabset> 默认有个active属性,根据官方文档,active的默认值是0,也就是说,默认显示索引为0的标签页,可以通过修改这个值来默认显示不同的索引的标签页. 示例: ...
- Jmeter4.0----CSV Data Set Config_对输入参数进行参数化(14)
1.说明 测试接口时,当请求参数不是固定的,每次请求对应的参数都是不同的,就需要对请求参数进行参数化. 2.步骤 第一步:准备数据 (以报告编制人员为例)首先创建.txt文本,自己编辑要参数化的内容 ...
- Pandas处理数据常用方法
# -*- coding: utf-8 -*-import pandas as pd"""(1)利用pandas读取csv文件"""def ...
- Linux系统配置双网卡绑定bond0
1.bonding简述 双网卡配置设置虚拟为一个网卡实现网卡的冗余,其中一个网卡坏掉后网络通信仍可正常使用,实现网卡层面的负载均衡和高可用性.现在一般的企业都会使用双网卡接入,这样既能添加网络带宽,同 ...
- 精心收集的SSH框架的面试题汇总
Hibernate工作原理及为什么要用? 原理: 1. 读取并解析配置文件 2. 读取并解析映射信息,创建SessionFactory 3. 打开Sesssion 4. 创建事务Transation ...
- SpringBoot | 第二十四章:日志管理之AOP统一日志
前言 上一章节,介绍了目前开发中常见的log4j2及logback日志框架的整合知识.在很多时候,我们在开发一个系统时,不管出于何种考虑,比如是审计要求,或者防抵赖,还是保留操作痕迹的角度,一般都会有 ...
- linq 读取xml
xml 文件如下: <?xml version="1.0" encoding="utf-8" ?><nodes> <node> ...
- UICollectionView笔记2
WWDC 2012 Session笔记——219 Advanced Collection Views and Building Custom Layouts 这是博主的WWDC2012笔记系列中的一篇 ...
- JAVA反射练习
JAVA反射练习 题目 实现一个方法 public static Object execute(String className, String methodName, Object args[]) ...