今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的

 //
// ViewController.m
// 仿淘宝,上拉进入详情
//
// Created by Amydom on 16/11/22.
// Copyright © 2016年 Amydom. All rights reserved.
// #import "ViewController.h" @interface ViewController ()<UITableViewDelegate , UITableViewDataSource , UIScrollViewDelegate , UIWebViewDelegate> @property (nonatomic , strong)UITableView *tableView; @property (nonatomic , strong)UIWebView *webView; @property (nonnull , strong)UILabel *headLab; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor]; [self createView]; } - (void)createView{ _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.rowHeight = .f;
[self.view addSubview:_tableView];
[_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"]; UILabel *footLabel = [[UILabel alloc]initWithFrame:CGRectMake(, , self.view.frame.size.width, )];
footLabel.text = @"继续拖动,查看图文详情";
footLabel.font = [UIFont systemFontOfSize:];
footLabel.textAlignment = NSTextAlignmentCenter;
_tableView.tableFooterView = footLabel;
//注意:懒加载时,只有用 self 才能调其 getter 方法
[self.view addSubview:self.webView];
_headLab = [[UILabel alloc] init];
_headLab.text = @"上拉,返回详情";
_headLab.textAlignment = NSTextAlignmentCenter;
_headLab.font = [UIFont systemFontOfSize:];
_headLab.frame = CGRectMake(, , self.view.frame.size.width, .f);
_headLab.alpha = .f;
_headLab.textColor = [UIColor blackColor];
[_webView addSubview:_headLab]; [ _webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil]; } //懒加载 webView 增加流畅度
- (UIWebView *)webView{ //注意,这里不用 self 防止循环引用
if (!_webView) {
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height)];
_webView.delegate = self;
_webView.delegate = self;
_webView.scrollView.delegate = self; [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]];
} return _webView; }
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return ; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *indetifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:indetifier];
cell.textLabel.text = @"Amydom"; return cell; } //监测 scroll 的偏移量
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
CGFloat offsetY = scrollView.contentOffset.y; if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滚动
{
// 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度
CGFloat valueNum = _tableView.contentSize.height - self.view.frame.size.height;
if ((offsetY - valueNum) > )
{ [self goToDetailAnimation]; // 进入图文详情的动画
}
} else // webView页面上的滚动
{
if(offsetY < && -offsetY > )
{
[self backToFirstPageAnimation]; // 返回基本详情界面的动画
}
}
} // 进入详情的动画
- (void)goToDetailAnimation
{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_webView.frame = CGRectMake(, , self.view.frame.size.width, self.view.frame.size.height);
_tableView.frame = CGRectMake(, -self.view.frame.size.height , self.view.frame.size.width, self.view.frame.size.height);
} completion:^(BOOL finished) { }];
} // 返回第一个界面的动画
- (void)backToFirstPageAnimation
{
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
_tableView.frame = CGRectMake(, , self.view.frame.size.width, self.view.bounds.size.height);
_webView.frame = CGRectMake(, _tableView.contentSize.height, self.view.frame.size.width, self.view.frame.size.height); } completion:^(BOOL finished) { }];
} // KVO观察
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{ if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"])
{
[self headLabAnimation:[change[@"new"] CGPointValue].y];
}else
{
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
}
} // 头部提示文本动画
- (void)headLabAnimation:(CGFloat)offsetY
{
_headLab.alpha = -offsetY/;
_headLab.center = CGPointMake(self.view.frame.size.width/, -offsetY/.f);
// 图标翻转,表示已超过临界值,松手就会返回上页
if(-offsetY > ){
_headLab.textColor = [UIColor redColor];
_headLab.text = @"释放,返回详情";
}else{
_headLab.textColor = [UIColor blackColor];
_headLab.text = @"上拉,返回详情";
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} @end

转::iOS 仿淘宝,上拉进入详情页面的更多相关文章

  1. 仿淘宝使用flex布局实现页面顶部和底部的固定布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. Android仿淘宝继续上拉进入商品详情页的效果,使用双Fragment动画切换;

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

  3. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

  4. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  5. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

  6. android版高仿淘宝客户端源码V2.3

    android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...

  7. 仿淘宝左侧菜单导航栏纯Html + css 写的

    这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...

  8. Android仿淘宝头条滚动广告条

    之前我使用TextView+Handler+动画,实现了一个简单的仿淘宝广告条的滚动,https://download.csdn.net/download/qq_35605213/9660825: 无 ...

  9. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

随机推荐

  1. 牛客小白月赛5 D 阶乘(factorial) 【前缀】

    链接:https://www.nowcoder.com/acm/contest/135/D 题目描述 输入描述: 输入数据共一行,一个正整数n,意义如“问题描述”. 输出描述: 输出一行描述答案: 一 ...

  2. 题解 P3367 【【模板】并查集】

    #include<iostream> #include<cstdio> using namespace std; int n,m,x,y,z; ]; //f[i]表示i的祖先 ...

  3. dataTable 自定义排序

    $("#id").DataTable({ aaSorting: [0, 'desc'], // 默认排序 aoColumnDefs: [ {
 "bSortable&qu ...

  4. Zabbix监控告警Lack of free swap space on Zabbix server解决办法

    报错详情如下: 是因为Zabbix监控没有考虑虚拟主机的交换空间情况 解决办法修改配置 修改表达式内容:{Template OS Linux:system.swap.size[,pfree].last ...

  5. java抓取12306火车余票信息

    最近在弄一个微信的公众帐号,涉及到火车票查询,之前用的网上找到的一个接口,但只能查到火车时刻表,12306又没有提供专门的查票的接口.今天突然想起自己直接去12306上查询,抓取查询返回的数据包,这样 ...

  6. JZ2440开发板与ubuntu互ping,然后进行文件的共享和挂载

    操作手册如下:但本人直接用网线直接连通开发板的网口与电脑的网口没有成功过.采用路由器可以直接ping通,具体操作如下: 首先用网线将开发板和路由器连接.电脑无论是用wifi还是网线均可.然后关闭Win ...

  7. [译]The Python Tutorial#1. Whetting Your Appetite

    [译]The Python Tutorial#Whetting Your Appetite 1. Whetting Your Appetite 如果你需要使用计算机做很多工作,最终会发现很多任务需要自 ...

  8. Python之路-基础数据类型之字符串

    字符串类型 字符串是不可变的数据类型 索引(下标) 我们在日常生活中会遇到很多类似的情况,例如吃饭排队叫号,在学校时会有学号,工作时会有工号,这些就是一种能保证唯一准确的手段,在计算机中也是一样,它就 ...

  9. vue/vux编译时出现 unexpected token <11:0-485>

    最近开发Vux项目,一直使用VS Code开发工具,可以格式化里面的<script>代码的: 但是今天突然无法格式化代码,而且编译报错.主要提示类似:unexpected token  & ...

  10. 【Clone Graph】cpp

    题目: Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. ...