需求:模仿淘寶下拉出現(xiàn)商品詳情頁.有彈簧效果,先View 一下最終效果 Demo

viewShopDetail.gif

核心思路

1、設置一個 UIScrollView 作為視圖底層，并且設置分頁為兩頁
2、然后在第一個分頁上添加一個 UITableView 并且設置表格能夠上提加載（上拉操作即為讓視圖滾動到下一頁）
3、 在第二個分頁上添加一個 WkWebView 并且設置能有下拉刷新操作（下拉操作即為讓視圖滾動到上一頁）
ps：以上所提及UITableView與UIWebView 可以自行更改為其他滾動控件也是可行的
實現(xiàn)需要的第三方支持：MJRefresh (也可以不用)

代碼實現(xiàn)

1.設置scrollView作為底部視圖

 self.contentView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, ScreenW, (ScreenH-64))];
// 設置contentSize 內(nèi)容
    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  繼續(xù)拖動查看更多信息
    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:^{
        //下拉執(zhí)行對應的操作
        [UIView animateWithDuration:0.5 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
            self.contentView.contentOffset = CGPointMake(0, 0);
        } completion:^(BOOL finished) {
            //結(jié)束加載
            [self.webV.scrollView.mj_header endRefreshing];
        }];
        
    }];
    [header setTitle:@"繼續(xù)拖動回到頂部" 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 給監(jiān)聽tableView的滾動,當滾動到最大的contentOffset的時候 設置底部scrollView 滾動到下一頁

根據(jù)自己的需求選擇怎么樣做過度動畫

- (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) {
               
            }];
        }
        
    }
}