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）