iOS仿淘宝详情页，支付宝首页上滑效果

功能需求

最近需要修改商品详情页，其他没什么就是一个多种Cell的列表，关键是其中的一个效果不太好实现。

商品详情gif.gif

要求轮播图滑动的速率慢于轮播图以下部分滑动的速率。给人一种轮播图被遮盖的错觉。

主要思路

刚开始感觉就是用tableView可以搞定，结果无论我怎么写，都不会有这种遮盖效果。只好问度娘，还真有人写出来了，大概原理如下：首先需要用到scrollView和tableView两个主要控件。将轮播图部分和tableView部分子上而下的放到scrollView上面，然后给足tableView所使用的高度，只能大不能小。这一点很重要，只有将tableView的高度给够了，tableView才不会滑动（这个思路很巧妙）。再根据实际需要设置scollView的contentSize。然后再在- (void)scrollViewDidScroll:(UIScrollView *)scrollView的方法中设置轮播图的和tableView的frame和origin，将轮播图的origin设置成偏移量的二分之一。将tableView的origin设置成偏移量。

代码实现

#import "GoodsDetail1ViewController.h"
@interface GoodsDetail1ViewController ()<UITableViewDelegate, UITableViewDataSource, APIRequestDelegate>
@property (nonatomic, strong)UIScrollView *scrollView;
@property (nonatomic, strong)UIView *topView;
@property (nonatomic, strong)UIView *topBannerView;
@implementation GoodsDetail1ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT +50)];
    self.scrollView.contentSize = CGSizeMake(0, SCREEN_HEIGHT * 8);
    self.scrollView.delegate = self;
    self.scrollView.bounces = YES;
    [self.view addSubview:self.scrollView];
    self.topView = [[UIView alloc]initWithFrame: CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH)];
    self.topView.backgroundColor = [UIColor yellowColor];
    self.topBannerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    self.topBannerView.backgroundColor = [UIColor whiteColor];
    [self.topView addSubview:self.topBannerView];
    [self.scrollView addSubview:self.topView];
    self.goodsDataTableview1 = [[UITableView alloc]initWithFrame:CGRectMake(0, SCREEN_WIDTH, SCREEN_WIDTH, SCREEN_HEIGHT * 9) style:UITableViewStylePlain];
    self.goodsDataTableview1.backgroundColor = [UIColor colorWithHexColorString:@"ededed"];
    self.goodsDataTableview1.delegate = self;
    self.goodsDataTableview1.dataSource = self;
    self.goodsDataTableview1.bounces = NO;
    self.goodsDataTableview1.scrollEnabled = NO;
    [self.scrollView addSubview:self.goodsDataTableview1];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView == self.scrollView) {//对其偏移量进行设置。
        CGFloat offsetY = scrollView.contentOffset.y;
        if (offsetY <= 0) {
            CGRect rect = self.topView.frame;
            rect.origin.y = offsetY;
            self.topView.frame = rect;
            rect = self.goodsDataTableview1.frame;
            rect.origin.y = offsetY + SCREEN_WIDTH;
            self.goodsDataTableview1.frame = rect;
            rect = self.topBannerView.frame;
            rect.origin.y = 0;
            self.topBannerView.frame = rect;
        } else  {
            CGRect rect = self.topBannerView.frame;
            rect.origin.y = offsetY / 2;
            self.topBannerView.frame = rect;
        }
}
}

以上只是部分代码，提示提供个思路余下的部分还得需要你自己亲自实现。

参考文档

（http://www.jianshu.com/p/7516eb852cca）