需求:模仿淘宝下拉出现商品详情页.有弹簧效果,先View 一下最终效果 Demo
viewShopDetail.gif
核心思路
1、设置一个 UIScrollView 作为视图底层，并且设置分页为两页
2、然后在第一个分页上添加一个 UITableView 并且设置表格能够上提加载（上拉操作即为让视图滚动到下一页）
3、 在第二个分页上添加一个 WkWebView 并且设置能有下拉刷新操作（下拉操作即为让视图滚动到上一页）
ps：以上所提及UITableView与UIWebView 可以自行更改为其他滚动控件也是可行的
实现需要的第三方支持：MJRefresh (也可以不用)
代码实现
1.设置scrollView作为底部视图
self.contentView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, ScreenW, (ScreenH-64))];
// 设置contentSize 内容
self.contentView.contentSize = CGSizeMake(ScreenW, (ScreenH-64)*2);
self.contentView.pagingEnabled = YES;
self.contentView.scrollEnabled = NO;
// 将scrollView 作为底部视图
[self.view addSubview:self.contentView];
2.设置tableView作为scrollView的子控件,并设置frame
// 设置tableView作为scrollView的子控件,并设置tableView的frame
self.tabV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH-64) style:UITableViewStylePlain];
self.tabV.backgroundColor = [UIColor colorWithRed:240/255.0 green:240/255.0 blue:240/255.0 alpha:1];
self.tabV.delegate = self;
self.tabV.dataSource = self;
// 设置 tableFooterView 的指示 view 继续拖动查看更多信息
self.tabV.tableFooterView = self.indicateView;
[self.contentView addSubview:self.tabV];
3 设置webView作为scrollView的子控件,并设置frame
self.webV = [[WKWebView alloc] initWithFrame:CGRectMake(0, ScreenH-64, ScreenW, ScreenH-64)];
self.webV.scrollView.delegate = self;
[self.contentView addSubview:_webV];
4.给webview 设置Header
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
//下拉执行对应的操作
[UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.contentView.contentOffset = CGPointMake(0, 0);
} completion:^(BOOL finished) {
//结束加载
[self.webV.scrollView.mj_header endRefreshing];
}];
}];
[header setTitle:@"继续拖动回到顶部" forState:MJRefreshStateIdle];
[header setTitle:@"松手回到顶部" forState:MJRefreshStatePulling];
[header setTitle:@"准备回到顶部" forState:MJRefreshStateRefreshing];
header.lastUpdatedTimeLabel.hidden = YES;
header.arrowView.hidden = YES;
self.webV.scrollView.mj_header = header;
5.在- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 给监听tableView的滚动,当滚动到最大的contentOffset的时候 设置底部scrollView 滚动到下一页
根据自己的需求选择怎么样做过度动画
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat contentHeight = scrollView.contentSize.height;
CGFloat maxOffset = contentHeight - scrollView.bounds.size.height;
if (scrollView == self.tabV) {
if (offsetY+10 > maxOffset ) {
[UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.55 initialSpringVelocity:1.0/0.55 options:0 animations:^{
scrollView.contentOffset = CGPointMake(0, offsetY+10);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 animations:^{
self.contentView.contentOffset = CGPointMake(0, ScreenH-64);
}];
}];
[UIView animateWithDuration:0.9 animations:^{
}completion:^(BOOL finished) {
}];
}
}
}
