电商类下拉出现商品详情页实现

需求:模仿淘宝下拉出现商品详情页.有弹簧效果,先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) {
               
            }];
        }
        
    }
}

电商类下拉出现商品详情页实现

核心思路

代码实现

推荐阅读更多精彩内容