iOS 網(wǎng)頁和原生列表混合布局開發(fā)(文章+評論)

我們總會遇見特別不適合使用原生開發(fā)的頁面外构，比如一個文章詳情頁，上面是文章下面是評論播掷，就比如現(xiàn)在用的簡書的手機版這樣审编，那么這種需求應該怎么做呢？
最好的方法當然是整個頁面都是用H5開發(fā)歧匈，哈哈哈割笙；當然下面評論有時候會有很多交互導致得用原生控件開發(fā)，那這里就面臨著嚴峻的問題了，上面是網(wǎng)頁可以滑動伤溉，下面是評論最好是用列表做，具體怎么組合起來就值得我們說道說道了妻率，當然方法有很多種乱顾，我這里講解一種我覺得各方面都不錯的。

ps：問題總結(jié)起來還是兩個滑動視圖上下滑動問題所以用我之前講解的多個滑動視圖沖突解決http://www.reibang.com/p/cfe517ce437b 也可以解決不過這樣使用H5那面配合的地方比較多宫静。這個不多說走净，下面介紹我們今天要說的。

這個方案的整體思路：把web和table同時加在一個底層ScrollView上面孤里，滑動底層ScrollView同時不斷控制web和table的偏移量位置伏伯，使頁面看起來是兩個滑動視圖連在一起的。

整體結(jié)構(gòu)如圖

webAndtable.png

一捌袜，視圖介紹

黃色的是底層ScrollView说搅，青色的一個加在底層ScrollView上的view(這里我們叫它contentView)，然后正加載簡書網(wǎng)頁的是web虏等，紅色部分是table弄唧。web和table再加contentView上，這樣我們控制整體位置的時候使用contentView就行霍衫；

二候引，視圖之間的高度關系：

web和table的最大高度都是底層ScrollView的高度，這樣做可以正好讓其中一個充滿整個底層ScrollView敦跌。
contentView的高度是web和table高度的和(畢竟就是為了放他們兩)澄干。
底層ScrollView的可滑動高度這里設定成web和table可滑動高度的總和，方便滑動處理柠傍。
ps：具體代碼在后面麸俘。

三，滑動處理思路

滑動都靠底層ScrollView携兵，禁用web和table的滑動疾掰，上面說了底層ScrollView的可滑動高度是web和table的總和所以進度條是正常的。
然后在滑動的同時不斷調(diào)整contentView的位置徐紧，web和table的偏移量静檬，使頁面效果看起來符合預期。

四并级，滑動處理具體操作拂檩，整個滑動可以分成五階段。ps：offsety 底層ScrollView的偏移量

1.offsety<=0,不用過多操作正吵氨蹋滑動
2.web內(nèi)部可以滑動稻励。控制contentView懸浮，使web在屏幕可視區(qū)域望抽。同時修改web的偏移量加矛。
3.web滑動到頭。保持contentView的位置和web的偏移量煤篙，使table滑動到屏幕可視區(qū)域
4.table內(nèi)部可以滑動斟览。控制contentView懸浮辑奈，使table在屏幕可視區(qū)域苛茂。同時修改table的偏移量。
5.table滑動到頭鸠窗。保持contentView的位置和table的偏移量妓羊，使頁面滑動到底部
四，具體代碼
1.因為web和table都是隨內(nèi)容變高的稍计，這里選擇通過監(jiān)聽兩者高度變化躁绸，同時刷新各個控件的高度，對應第二步驟

//添加監(jiān)聽
[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");
    }
}

打完收工丙猬。