iOS WKWebView 和 UITableView 嵌套解决方案对比

现在越来越多的APP拥有资讯页,既可以看资讯,也可以看推荐写评论等等,这部分基本组成都是WKWebView 和 UITableView 嵌套,我对比了下现有的一些主流解决方案,看看各自的优缺点及其我的优化解决方案

1、WKWebView 直接作为 UITableView 的 tableHeaderView 

这也是大多数开发之类需求第一个想到的方案,简单粗暴,关闭WKWebView的scrollEnabled属性后直接把tableView.tableHeaderView = webView,待webView加载完成后,将tableView的tableHeaderView的高度设置成webView.scrollView.contentSize,这里引用@xuning0 文章中的图作为演示

这种方法虽然简单粗暴,但是不推荐用在项目里,缺点很多,内存占用量大,滑动可能还卡顿,甚至一些网页的弹窗之类的居中居上显示的也会因为不在屏幕内看不到,严重影响客户使用

2、通过给HTML增加一个tableView大小的div实现

@xuning0大神的说法,这个是简书使用的方案,详细的可以去那个文章去看,主要原理是将tableView贴到webView的scrollView上,并且禁止了webView和tableView的滚动,改用自定义手势和UIDynamicAnimator 进行模拟阻尼滚动操作

这种方案优点自不用说,内存占用小,嵌套滑动无卡顿,但是缺点还是存在的,禁止了webView的滚动后,网页的适配性就差了,像一些网页中的回到顶部之类的操作,还有二级页面加载及返回等情况,要在scrollViewDidScroll中不停的调js,这对代码的业务控制是个考验,毕竟那个方法调用次数很高

3、将webView和tableView加到ScrollView上

腾讯新闻和今日头条都是使用的这个方案,原理如下图


这个原理是将webView和tableView都贴到scrollView上,并且禁止了webView和tableView的滚动,然后将scrollView的contentSize设置成webView.scrollView.contentSize + tableView.contentSize ,滚动scrollView的时候不断的调整webView和tableView的contentOffset及位置

这种方案优点不用说,占用内存小,滑动流畅,也不用自定义拖动手势之类的,代码量相对较少,但是缺点也不少,和方案2一样,都是禁止了webView、tableView的滚动,所以当webView和tableView的contentSize改变时,必须处理好scrollView的contentOffset ,不然会有明显失真滑动,还有像网页内置的返回顶点啊,多级网页加载及返回啊,都要做特殊处理,对网页的格式和方案2一样都是比较严苛的。

4、webView置于tableView下面,设置tableHeaderView的高度

这个也是我总结了这么多方案优化出来的最推荐的方案,原理图如下:


原理是,webView和tableView都加在一个父视图上,然后tableView的tableHeaderView的高度和webView的contentSize一致,并且设置该tableHeaderView 不响应任何点击事件及手势,然后webView设置其contentInset属性,使contentInset.bottom = tableView.contentSize.height - tableHeaderView.bounds.size.height,然后使webView和tableView关联滑动。

这个方案优点很突出,内存占用少,且没有禁用任何滑动事件,对h5的跳转、滑动等适配的很好,当然也有一些缺点,就是不能设置tableView的tableHeaderView了,而且因为设置了webView的contentInset属性,涉及到safeArea的时候可能要手动调整contentInset属性

瑕不掩瑜,该方案是我对比总结出的最优方案,对此,我开发了一个框架,希望能帮助到各位,YBWebViewScrollNestView

参考资料:

1、UIWebView与UITableView的嵌套方案

2、iOS 资讯详情页实现(WebView和TableView混合使用)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容