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被拉动。
这样，效果就实现了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！