iOS WKWebView+UITableView嵌套/缓存

立即下载用AI写一个

发布时间：2020-06-04

5人 | 浏览：2814次 | 收藏 |

技术：OC

运行环境：Xcode

概述

该demo涉及WKWebView的使用、WKWebView+UITableView混排、UIScrollView实现原理、WKWebView离线缓存功能等

详细

![](/contentImages/image/20200604/o8RtOPkPr6qIVWVIug9.gif)

#  目录
> 做内容展示页的时候，经常会用到WKWebView+UITableView的混排功能，现在此做一个总结，该功能的实现我采用了四种方法。
>  1、 tableView.tableHeaderView = webView 撑开webView 
>  2、[webView.scrollView addSubview:tableView] + 占位Div
>  3、tableView.tableHeaderView = webView 不撑开webView (推荐)
>  4、scrollView addSubView: webView & tableView (推荐)
>  5、项目结构
>  6、结尾

# 方案1：

>  **webView**作为**tableView**的**Header**,  撑开**webView**，显示渲染全部内容，当内容过多时，比如大量高清图片时，容易造成内存暴涨（不建议使用），此方案简单粗暴 ,  仅适用于内容少的场景，具体实现不在此赘述，直接看代码。

# 方案2：

> 将 **tableView** 加到 **webView.scrollView** 上, **webView** 加载的HTML最后留一个**空白占位div**，用于确定 **tableView** 的位置，在监听到**webView.scrollView.contentSize**变化后，不断调整**tableView**的位置，同时将该**div**的尺寸设置为**tableView**的尺寸。禁用**tableView**和**webView.scrollVie**的**scrollEnabled = NO**，通过添加pan手势,手动调整 **contentOffset**。**tableView**的最大高度为屏幕高度，当内容不足一屏时，高度为内容高度。代码与方案3类似，往下看。

# 方案3(推荐)：

>  **webView**作为**tableView**的Header, 但不撑开**webView**。禁用**tableView**和**webView.scrollVie**的scrollEnabled = NO，通过添加**pan**手势,手动调整**contentOffset**。**webView**的最大高度为屏幕高度，当内容不足一屏时，高度为内容高度。和方案2类似，但是不需要插入占位Div。主要代码如下：

* ###### 步骤1：初始化配置

```
//禁用自带的滑动功能
 _webView.scrollView.scrollEnabled = NO;
 _tableView.scrollEnabled = NO;
// 给父视图添加拖动手势
 [self.view addGestureRecognizer:self.panRecognizer];
```

* ###### 步骤2：手动调整contentOffset

```
/// 拖拽手势，模拟UIScrollView滑动
- (void)handlePanGestureRecognizer:(UIPanGestureRecognizer *)recognizer {
    switch (recognizer.state) {
        case UIGestureRecognizerStateBegan: {
            //开始拖动，移除之前所有的动力行为
            [self.dynamicAnimator removeAllBehaviors];
        }
            break;
        case UIGestureRecognizerStateChanged: {
            CGPoint translation = [recognizer translationInView:self.view];
            //拖动过程中调整scrollView.contentOffset
            [self scrollViewsSetContentOffsetY:translation.y];
            [recognizer setTranslation:CGPointZero inView:self.view];
        }
            break;
        case UIGestureRecognizerStateEnded: {
            // 这个if是为了避免在拉到边缘时，以一个非常小的初速度松手不回弹的问题
            if (fabs([recognizer velocityInView:self.view].y) < 120) {
                if ([self.tableView sl_isTop] &&
                    [self.webView.scrollView sl_isTop]) {
                    //顶部
                    [self performBounceForScrollView:self.webView.scrollView isAtTop:YES];
                } else if ([self.tableView sl_isBottom] &&
                           [self.webView.scrollView sl_isBottom]) {
                    //底部
                    if (self.tableView.frame.size.height < self.view.sl_height) { //tableView不足一屏，webView bounce
                        [self performBounceForScrollView:self.webView.scrollView isAtTop:NO];
                    } else {
                        [self performBounceForScrollView:self.tableView isAtTop:NO];
                    }
                }
                return;
   }
```

* ###### 步骤3：模拟惯性和边缘反弹效果

```
   //动力元素 力的操作对象
 SLDynamicItem *item = [[SLDynamicItem alloc] init];
 item.center = CGPointZero;
  __block CGFloat lastCenterY = 0;
//惯性力
 UIDynamicItemBehavior *inertialBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[item]];
 //给item添加初始线速度 手指松开时的速度
 [inertialBehavior addLinearVelocity:CGPointMake(0, -[recognizer velocityInView:self.view].y) forItem:item];
       //减速度  无速度阻尼
     inertialBehavior.resistance = 2;
       __weak typeof(self) weakSelf = self;
      inertialBehavior.action = ^{
        //惯性力 移动的距离
     [weakSelf scrollViewsSetContentOffsetY:lastCenterY - item.center.y];
     lastCenterY = item.center.y;
 };
  //注意，self.inertialBehavior 的修饰符是weak，惯性力结束停止之后，会释放inertialBehavior对象，self.inertialBehavior = nil
  self.inertialBehavior = inertialBehavior;
     [self.dynamicAnimator addBehavior:inertialBehavior];
 }

//反弹力
- (void)performBounceForScrollView:(UIScrollView *)scrollView isAtTop:(BOOL)isTop {
    if (!self.bounceBehavior) {
        //移除惯性力
        [self.dynamicAnimator removeBehavior:self.inertialBehavior];           //吸附力操作元素
        SLDynamicItem *item = [[SLDynamicItem alloc] init];
        item.center = scrollView.contentOffset;
        //吸附力的锚点Y
        CGFloat attachedToAnchorY = 0;
        if (scrollView == self.tableView) {
            //顶部时吸附力的Y轴锚点是0  底部时的锚点是Y轴最大偏移量
            attachedToAnchorY = isTop ? 0 : [self.tableView sl_maxContentOffsetY];
        }else {
            attachedToAnchorY = 0;
        }
        //吸附力
        UIAttachmentBehavior *bounceBehavior = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:CGPointMake(0, attachedToAnchorY)];
        //吸附点的距离
        bounceBehavior.length = 0;
        //阻尼/缓冲
        bounceBehavior.damping = 1;
        //频率
        bounceBehavior.frequency = 2;
        bounceBehavior.action = ^{
            scrollView.contentOffset = CGPointMake(0, item.center.y);
        };
        self.bounceBehavior = bounceBehavior;
        [self.dynamicAnimator addBehavior:bounceBehavior];
    }
}

```

>   方案2和3依赖于 UIKit 中的动力学/仿真物理学模块，去实现松手后的惯性滑动和边缘反弹效果，涉及的类主要包括   **UIDynamicAnimator**、**UIDynamicItemBehavior**、**UIAttachmentBehavior**、**UIDynamicItem**，我也利用这些类自定义继承于UIView的类实现UIScrollView的效果，详情可以去看代码。

# 方案4(推荐)：

> **[scrollView addSubView: webView & tableView]; scrollView.contenSize = webView.contenSize + tableView.contenSize**; **webView**和**tableView**的最大高度为一屏高，并禁用**scrollEnabled=NO**，然后根据**scrollView**的滑动偏移量调整**webView**和**tableView**的展示区域**contenOffset**。

* ###### 步骤1：确定webView和tableView的高度

```
//添加观察者 监听webView 和tableView 的contentSize
- (void)addKVO{
    [self.webView addObserver:self
                   forKeyPath:NSStringFromSelector(@selector(estimatedProgress))
                      options:NSKeyValueObservingOptionNew
                      context:nil];
    [self.webView addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];
    [self.tableView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
}
/// 根据WebView和tableView的ContentSize变化，调整父scrollView.contentSize、WebView和tableView的高度位置、展示区域
- (void)updateContainerScrollViewContentSize{
    
    self.containerScrollView.contentSize = CGSizeMake(self.view.sl_width, _webViewContentHeight + _tableViewContentHeight);
    
    //如果内容不满一屏，则webView、tableView高度为内容高，超过一屏则最大高为一屏高
    CGFloat webViewHeight = (_webViewContentHeight < self.view.sl_height) ? _webViewContentHeight : self.view.sl_height ;
    CGFloat tableViewHeight = _tableViewContentHeight < self.view.sl_height ? _tableViewContentHeight : self.view.sl_height;
    
    self.contentView.sl_height = webViewHeight + tableViewHeight;
    self.webView.sl_height = webViewHeight <= 0.1 ?0.1 :webViewHeight;
    self.tableView.sl_height = tableViewHeight;
    self.tableView.sl_y = self.webView.sl_height;
    
    //更新展示区域
    [self scrollViewDidScroll:self.containerScrollView];
}

```

* ###### 步骤2：根据scrollView的偏移量调整webView和tableView的的位置和偏移量

```

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (_containerScrollView != scrollView) {
        return;
    }
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat webViewHeight = self.webView.sl_height;
    CGFloat tableViewHeight = self.tableView.sl_height;
     if (offsetY <= 0) {
        //顶部下拉
        self.contentView.sl_y = 0;
        self.webView.scrollView.contentOffset = CGPointZero;
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < _webViewContentHeight - webViewHeight){
        //父scrollView偏移量的展示范围在webView的最大偏移量内容区域
        //contentView相对位置保持不动，调整webView的contentOffset
        self.contentView.sl_y = offsetY;
        self.webView.scrollView.contentOffset = CGPointMake(0, offsetY);
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < _webViewContentHeight){
        //webView滑到了底部
        self.contentView.sl_y = _webViewContentHeight - webViewHeight;
        self.webView.scrollView.contentOffset = CGPointMake(0, _webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < _webViewContentHeight + _tableViewContentHeight - tableViewHeight){
        //父scrollView偏移量的展示范围到达tableView的最大偏移量内容区域
        //调整tableView的contentOffset
        self.contentView.sl_y = offsetY - webViewHeight;
        self.tableView.contentOffset = CGPointMake(0, offsetY - _webViewContentHeight);
        self.webView.scrollView.contentOffset = CGPointMake(0, _webViewContentHeight - webViewHeight);
    }else if(offsetY <= _webViewContentHeight + _tableViewContentHeight ){
        //tableView滑到了底部
        self.contentView.sl_y = self.containerScrollView.contentSize.height - self.contentView.sl_height;
        self.webView.scrollView.contentOffset = CGPointMake(0, _webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointMake(0, _tableViewContentHeight - tableViewHeight);
    }else {
    }
}

```

# 5、项目结构

![](/contentImages/image/20200604/U5LIzMO6OBtqd6IgjFh.png)

# 6、结尾

> 涉及 WKWebView的使用、WKWebView+UITableView混排、UIScrollView实现原理、WKWebView离线缓存功能 等更多内容都在这里

> iOS_Tips集合简介：
> 1、暗黑模式  
> 2、AppleID登录应用  
> 3、AVFoundation 高仿微信相机拍摄和编辑   
> 4、AVFoundation 人脸检测  
> 5、AVFoundation 实时滤镜  
> 6、GPUImage框架的使用  
> 7、VideoToolBox和AudioToolBox音视频编解码  
> 8、OpenGL ES学习   
> 9、LeetCode算法练习  
> 10、键盘和UIMenuController的并存问题  
> 11、iOS Crash防护  
> 12、WKWebView相关

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

iOS WKWebView+UITableView嵌套/缓存

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子