iOS开发 -- UIScrollView 仿京东金融首页效果

京东金融效果如下：

代码地址：https://github.com/bybyWind/ImitateJDjrApp.git

先搭建三个UIScrollVIew:

@property(nonatomic,strong)UIScrollView *bgScrollView;//背景ScollView
@property(nonatomic,strong)UIScrollView *topScrollView;//顶部ScrollView
@property(nonatomic,strong)UIScrollView *bottomScrollView;//底部ScrollView
···
#pragma mark - getter
-(UIScrollView *)bgScrollView{
    if (!_bgScrollView) {
        _bgScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kUISCREEN_WIDTH, kUISCREEN_HEIGHT)];
        _bgScrollView.contentSize = CGSizeMake(0, 800);
        [self.view addSubview:_bgScrollView];
    }
    return _bgScrollView;
}

-(UIScrollView *)topScrollView{
    if (!_topScrollView ){
        _topScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kTOPSCROLLVIEWSPACE, 0, kTOPSCROLLVIEWWIDTH, 200)];
        //三分页
        _topScrollView.contentSize = CGSizeMake(kTOPSCROLLVIEWWIDTH*3, 0);
        _topScrollView.backgroundColor = [UIColor whiteColor];
        _topScrollView.pagingEnabled = YES;
        _topScrollView.bounces = NO;
        //剪裁效果设为NO,使不满屏的UIScrollView显示出满屏的效果
        _topScrollView.clipsToBounds  = NO;
        _topScrollView.delegate = self;
        _topScrollView.showsHorizontalScrollIndicator = NO;
        for (int i = 0; i<3; i++) {
            UIView *v = [[UIView alloc] initWithFrame:CGRectMake(i*kTOPSCROLLVIEWWIDTH, 0, kTOPSCROLLVIEWWIDTH, 200)];
            v.backgroundColor = randomColor;//随机颜色
            [_topScrollView addSubview:v];
        }
        [self.bgScrollView addSubview:_topScrollView];

    }
    return _topScrollView;
}
-(UIScrollView *)bottomScrollView{
    if (!_bottomScrollView ){
        _bottomScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 200, kUISCREEN_WIDTH, 600)];
        _bottomScrollView.contentSize = CGSizeMake(375*3, 0);
        _bottomScrollView.backgroundColor = [UIColor whiteColor];
        _bottomScrollView.delegate = self;
        _bottomScrollView.pagingEnabled = YES;
        _bottomScrollView.bounces = NO;
        for (int i = 0; i<3; i++) {
            UIView *v = [[UIImageView alloc] initWithFrame:CGRectMake(i*kUISCREEN_WIDTH, 0, kUISCREEN_WIDTH, 600)];
            v.backgroundColor = randomColor;
            [_bottomScrollView addSubview:v];
        }

        [self.bgScrollView addSubview:_bottomScrollView];

    }
    return _bottomScrollView;
}

这时候效果是这样的：

上下都正常滑动，只是没有关联。
在UIScrollVIew代理方法里面实现：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

    if (scrollView == self.topScrollView && _witchScrollView == 1) {
        [self.bottomScrollView setContentOffset:CGPointMake((scrollView.contentOffset.x)*kUISCREEN_WIDTH/kTOPSCROLLVIEWWIDTH, 0)];
    }

    if (scrollView == self.bottomScrollView && _witchScrollView == 2) {
        [self.topScrollView setContentOffset:CGPointMake((scrollView.contentOffset.x)*kTOPSCROLLVIEWWIDTH/kUISCREEN_WIDTH, 0)];
    }

}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    if (scrollView == self.topScrollView) {
        _witchScrollView = 1;
    }else if (scrollView == self.bottomScrollView){
        _witchScrollView = 2;
    }
}

_witchScrollView用来标记当前是哪个UIScrollView被拉动。
这样，效果就实现了。