模仿淘宝下拉显示详情展示页面，上拉返回界面

效果图一 效果图二
demo下载地址：https://github.com/ZhengYaWei1992/ZWTaobaoDetail
首先我们要知道淘宝的类似页面，商品展示页面是一个tabbleView，详情页面是一个webView。该效果的实现，实际上就是监控tabbleView和wenbView的contentOffset值来调节tabbleView和webView的frame值，从而控制两个页面的切换展示。主要实现代码在ScrollView的scrollViewDidEndDragging这个代理方法中。其中ScrollDistance是一个宏常量，主要控制拖动的距离。

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    CGFloat offsetY = scrollView.contentOffset.y;
    if ([scrollView isKindOfClass:[UITableView class]]) {
        // 能触发翻页的理想值:tableView整体的高度减去屏幕本身的高度
        CGFloat valueNum = self.tableView.contentSize.height -self.view.frame.size.height;
        if ((offsetY - valueNum) > ScrollDistance)
        {
            [self goToDetail]; // 进入图文详情的动画
        }
    }else{// webView页面上的滚动
        if(offsetY<0 && -offsetY > ScrollDistance)
        {
            [self backToFirstPage]; // 返回基本详情界面的动画
        }
    }
}

以下两个方法分别是进入到webView和tabbleView具体实现代码。

/**进入到webView*/
- (void)goToDetail{
    [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
        _webView.frame = CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 20);
        _tableView.frame = CGRectMake(0, -self.tableView.bounds.size.height, [UIScreen mainScreen].bounds.size.width, self.tableView.bounds.size.height);
    } completion:^(BOOL finished) {
        
    }];
}

/**返回到tableView*/
-(void)backToFirstPage{
    [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
        _tableView.frame = CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 20);
        _webView.frame = CGRectMake(0, _tableView.contentSize.height, [UIScreen mainScreen].bounds.size.width, self.tableView.bounds.size.height);
    } completion:^(BOOL finished) {
        
    }];
}

除了上面的核心代码之外，我们还要监控webView的scrollView属性的contentOffset值，判断拖动距离，在webView顶部给用户提示。

[_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)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
{
    self.headLabel.alpha = -offsetY/60;
    self.headLabel.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2.0, -offsetY/2.f);
    // 图标翻转，表示已超过临界值，松手就会返回上页
    if(-offsetY> ScrollDistance){
//        self.headLabel.textColor = [UIColor redColor];
        self.headLabel.text = @"释放，返回详情";
    }else{
//        self.headLabel.textColor = [UIColor lightGrayColor];
        self.headLabel.text = @"下拉，返回详情";
    }
}