Demo下载地址 : https://github.com/ShaoWenLe/ShoppingDetailsDemo/tree/master

参考文章iOS --类似淘宝详情页面的思路,自己写的Demo.一方面因为他的demo下面有些繁琐,自己的项目不需要那么复杂;另一方面因为还得加群才能获取demo,比较麻烦.这个demo比较简单,不过过渡动画效果方面还是没有淘宝的那么丝滑顺畅,如果过渡动画或者思路方面有更好的建议,请告知,我可以尝试一下,下面是代码:

底层是scrollview,分两页,第一页是tableView,第二页是View,View的子视图是tableview和两个webView; MJDIYAutoFooter和MJDIYHeader是用小马哥的MJRefresh控件DIY的

    _insideViewHeight.constant = (ScreenHeight-64)*2;
    _tableViewHeight.constant = ScreenHeight-64;
    _parameterTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    _parameterTableView.tableFooterView = [UITableView new];
    
    _headerView.frame = CGRectMake(0, 0, ScreenWidth, 200*ScaleSize);
    _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    _tableView.tableFooterView = [UITableView new];
  
    _tableView.tableHeaderView = _headerView;
    
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]];
    [_webView1 loadRequest:request];
    NSURLRequest *request1 = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]];
    [_webView2 loadRequest:request1];

    MJDIYAutoFooter *footer = [MJDIYAutoFooter footerWithRefreshingBlock:^{
        [UIView animateWithDuration:0.25 animations:^{
            _scrollView.contentOffset = CGPointMake(0, ScreenHeight-64);
        }];
        [_tableView.mj_footer endRefreshing];
    }];
    self.tableView.mj_footer = footer;
    
    MJDIYHeader *header = [MJDIYHeader headerWithRefreshingBlock:^{
        [UIView animateWithDuration:0.25 animations:^{
            _scrollView.contentOffset = CGPointMake(0, 0);
        }];
    
        [_parameterTableView.mj_header endRefreshing];
    }];
    _parameterTableView.mj_header = header;
    
    MJDIYHeader *header1 = [MJDIYHeader headerWithRefreshingBlock:^{
        [UIView animateWithDuration:0.25 animations:^{
            _scrollView.contentOffset = CGPointMake(0, 0);
        }];
        
        [_webView1.scrollView.mj_header endRefreshing];
    }];
    _webView1.scrollView.mj_header = header1;
    
    MJDIYHeader *header2 = [MJDIYHeader headerWithRefreshingBlock:^{
        [UIView animateWithDuration:0.25 animations:^{
            _scrollView.contentOffset = CGPointMake(0, 0);
        }];
        
        [_webView2.scrollView.mj_header endRefreshing];
    }];
    _webView2.scrollView.mj_header = header2;```


就这么多了,下载demo试试看吧,动画效果没有那么丝滑,希望有好的建议或者思路,更加方便简洁,有助于改善交互动画.当然,完全重写scrollview或者tableview,然后用偏移量自己判断的话,这种耗时比较大,感觉和自己写另类版的小马哥的MJRefresh没多大区别,也没有必要.