iOS 网页和原生列表混合布局开发(文章+评论)

我们总会遇见特别不适合使用原生开发的页面，比如一个文章详情页，上面是文章下面是评论，就比如现在用的简书的手机版这样，那么这种需求应该怎么做呢？
最好的方法当然是整个页面都是用H5开发，哈哈哈；当然下面评论有时候会有很多交互导致得用原生控件开发，那这里就面临着严峻的问题了，上面是网页可以滑动，下面是评论最好是用列表做，具体怎么组合起来就值得我们说道说道了，当然方法有很多种，我这里讲解一种我觉得各方面都不错的。

ps：问题总结起来还是两个滑动视图上下滑动问题所以用我之前讲解的多个滑动视图冲突解决https://www.jianshu.com/p/cfe517ce437b 也可以解决不过这样使用H5那面配合的地方比较多。这个不多说，下面介绍我们今天要说的。

这个方案的整体思路：把web和table同时加在一个底层ScrollView上面，滑动底层ScrollView同时不断控制web和table的偏移量位置，使页面看起来是两个滑动视图连在一起的。

整体结构如图 webAndtable.png

一，视图介绍

黄色的是底层ScrollView，青色的一个加在底层ScrollView上的view(这里我们叫它contentView)，然后正加载简书网页的是web，红色部分是table。web和table再加contentView上，这样我们控制整体位置的时候使用contentView就行；

二，视图之间的高度关系：

web和table的最大高度都是底层ScrollView的高度，这样做可以正好让其中一个充满整个底层ScrollView。
contentView的高度是web和table高度的和(毕竟就是为了放他们两)。
底层ScrollView的可滑动高度这里设定成web和table可滑动高度的总和，方便滑动处理。
ps：具体代码在后面。

三，滑动处理思路

滑动都靠底层ScrollView，禁用web和table的滑动，上面说了底层ScrollView的可滑动高度是web和table的总和所以进度条是正常的。
然后在滑动的同时不断调整contentView的位置，web和table的偏移量，使页面效果看起来符合预期。

四，滑动处理具体操作，整个滑动可以分成五阶段。ps：offsety 底层ScrollView的偏移量

1.offsety<=0,不用过多操作正常滑动
2.web内部可以滑动。控制contentView悬浮，使web在屏幕可视区域。同时修改web的偏移量。
3.web滑动到头。保持contentView的位置和web的偏移量，使table滑动到屏幕可视区域
4.table内部可以滑动。控制contentView悬浮，使table在屏幕可视区域。同时修改table的偏移量。
5.table滑动到头。保持contentView的位置和table的偏移量，使页面滑动到底部
四，具体代码
1.因为web和table都是随内容变高的，这里选择通过监听两者高度变化，同时刷新各个控件的高度，对应第二步骤

//添加监听
[self.webView addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];
 [self.collectionView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];

//刷新各个控件高度
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if (object == _webView) {
        if ([keyPath isEqualToString:@"scrollView.contentSize"]) {
            [self updateContainerScrollViewHeight];
        }
    }else if(object == _collectionView) {
        if ([keyPath isEqualToString:@"contentSize"]) {
            [self updateContainerScrollViewHeight];
        }
    }
}

- (void)updateContainerScrollViewHeight{
    CGFloat webViewContentHeight = self.webView.scrollView.contentSize.height;
    CGFloat collectionContentHeight = self.collectionView.contentSize.height;
    
    if (webViewContentHeight == _lastWebViewContentHeight && collectionContentHeight == _lastCollectionContentHeight) {
        return;
    }
    
    _lastWebViewContentHeight = webViewContentHeight;
    _lastCollectionContentHeight = collectionContentHeight;
    
    self.containerScrollView.contentSize = CGSizeMake(self.view.width, webViewContentHeight + collectionContentHeight);
    
    CGFloat webViewHeight = (webViewContentHeight < _contentHeight) ?webViewContentHeight :_contentHeight;
    CGFloat collectionHeight = collectionContentHeight < _contentHeight ?collectionContentHeight :_contentHeight;
    self.webView.height = webViewHeight <= 0.1 ?0.1 :webViewHeight;
    self.contentView.height = webViewHeight + collectionHeight;
    self.collectionView.height = collectionHeight;
    self.collectionView.top = self.webView.bottom;
    
    [self scrollViewDidScroll:self.containerScrollView];
}

2.具体滑动处理代码

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (_containerScrollView != scrollView) {
        return;
    }
    
    CGFloat offsetY = scrollView.contentOffset.y;
    
    CGFloat webViewHeight = self.webView.height;
    CGFloat collectionHeight = self.collectionView.height;
    
    CGFloat webViewContentHeight = self.webView.scrollView.contentSize.height;
    CGFloat collectionContentHeight = self.collectionView.contentSize.height;
    if (offsetY <= 0) {
        self.contentView.top = 0;
        self.webView.scrollView.contentOffset = CGPointZero;
        self.collectionView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight - webViewHeight){
        self.contentView.top = offsetY;
        self.webView.scrollView.contentOffset = CGPointMake(0, offsetY);
        self.collectionView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight){
        self.contentView.top = webViewContentHeight - webViewHeight;
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
        self.collectionView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight + collectionContentHeight - collectionHeight){
        self.contentView.top = offsetY - webViewHeight;
        self.collectionView.contentOffset = CGPointMake(0, offsetY - webViewContentHeight);
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
    }else if(offsetY <= webViewContentHeight + collectionContentHeight ){
        self.contentView.top = self.containerScrollView.contentSize.height - self.contentView.height;
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
        self.collectionView.contentOffset = CGPointMake(0, collectionContentHeight - collectionHeight);
    }else {
        //do nothing
        NSLog(@"do nothing");
    }
}

打完收工。