iOS WKWebView+UITableView混排

目录

做内容展示页的时候，经常会用到WKWebView+UITableView的混排功能，现在此做一个总结，该功能的实现我采用了四种方法。

• 1、 tableView.tableHeaderView = webView 撑开webView
• 2、[webView.scrollView addSubview:tableView] + 占位Div
• 3、tableView.tableHeaderView = webView 不撑开webView (推荐)
• 4、scrollView addSubView: webView & tableView (推荐)
• 5、结尾

方案1：

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

方案2：

简书的内容页实现方案 : UIWebView与UITableView的嵌套方案

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

方案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.pan