转：：iOS 仿淘宝,上拉进入详情页面

今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 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