首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TableView单元格的高度不会根据WebView动态变化

TableView是一种在移动开发中常用的列表控件,用于显示多个单元格(cell)的集合。在某些情况下,我们可能需要在TableView中显示包含WebView的单元格,并且希望该单元格的高度能够根据WebView的内容动态变化。

然而,TableView的单元格高度默认是固定的,不会自动根据内部WebView的内容进行调整。为了解决这个问题,我们可以采用以下的解决方案:

  1. 计算WebView的内容高度:在加载WebView的内容之后,我们可以通过WebView的scrollView.contentSize.height属性获取其内容的实际高度。
  2. 更新单元格的高度:根据获取到的WebView内容高度,我们可以手动更新单元格的高度。可以通过TableView的代理方法tableView(_:heightForRowAt:)来设置单元格的高度,返回WebView内容高度即可。

下面是一个示例代码,演示了如何根据WebView的内容动态调整TableView单元格的高度:

代码语言:txt
复制
import UIKit
import WebKit

class MyTableViewController: UITableViewController, WKNavigationDelegate {
    
    // 存储每个单元格的高度
    var cellHeights: [IndexPath: CGFloat] = [:]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 设置WebView代理
        webView.navigationDelegate = self
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "WebViewCell", for: indexPath) as! WebViewCell
        
        // 加载WebView内容
        cell.webView.loadHTMLString("Your HTML string", baseURL: nil)
        
        return cell
    }
    
    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        // 返回单元格高度,如果已经计算过则直接使用,否则返回默认高度
        return cellHeights[indexPath] ?? tableView.rowHeight
    }
    
    // WKNavigationDelegate方法,WebView加载完成后更新单元格高度
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.readyState", completionHandler: { [weak self] (result, error) in
            if let readyState = result as? String, readyState == "complete" {
                webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { [weak self] (result, error) in
                    if let height = result as? CGFloat {
                        let indexPath = self?.getIndexPath(for: webView)
                        self?.cellHeights[indexPath] = height
                        
                        // 刷新对应的单元格
                        if let indexPath = indexPath {
                            self?.tableView.reloadRows(at: [indexPath], with: .none)
                        }
                    }
                })
            }
        })
    }
    
    // 辅助方法,获取WebView所在的IndexPath
    private func getIndexPath(for webView: WKWebView) -> IndexPath? {
        let point = webView.convert(CGPoint.zero, to: tableView)
        return tableView.indexPathForRow(at: point)
    }
}

通过以上代码,我们能够实现TableView单元格的高度根据WebView内容的动态变化。这样就能够显示出适应内容大小的单元格,提升用户体验。

关于腾讯云相关产品,推荐使用腾讯云的移动直播(Mobile Live)产品来实现在移动端显示动态变化的WebView内容。腾讯云移动直播是一项强大的直播服务,可用于实时传输音视频内容到移动应用程序。您可以通过以下链接了解更多关于腾讯云移动直播的信息:

腾讯云移动直播产品介绍

请注意,以上的代码示例和产品推荐都是基于腾讯云的情况,并不针对其他云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS WKWebView+UITableView混排

div,用于确定 tableView 的位置,在监听到webView.scrollView.contentSize变化后,不断调整tableView的位置,同时将该div的尺寸设置为tableView的尺寸...tableView的最大高度为屏幕高度,当内容不足一屏时,高度为内容高度。 方案3(推荐): webView作为tableView的Header, 但不撑开webView。...tableView.contenSize; webView和tableView的最大高度为一屏高,并禁用scrollEnabled=NO,然后根据scrollView的滑动偏移量调整webView和tableView...步骤1:确定webView和tableView的高度 //添加观察者 监听webView 和tableView 的contentSize - (void)addKVO{ [self.webView...WebView和tableView的ContentSize变化,调整父scrollView.contentSize、WebView和tableView的高度位置、展示区域 - (void)updateContainerScrollViewContentSize

1.7K30
  • 问与答98:如何根据单元格中的值动态隐藏指定的行?

    excelperfect Q:我有一个工作表,在单元格B1中输入有数值,我想根据这个数值动态隐藏行2至行100。...具体地说,就是在工作表中放置一个命令按钮,如果单元格B1中的数值是10时,当我单击这个命令按钮时,会显示前10行,即第2行至第11行;再次单击该按钮后,隐藏全部的行,即第2行至第100行;再单击该按钮,...则又会显示第2行至第11行,又单击该按钮,隐藏第2行至第100行……也就是说,通过单击该按钮,重复显示第2行至第11行与隐藏第2行至第100行的操作。...注:这是在chandoo.org的论坛上看到的一个贴子,有点意思。...A:使用的VBA代码如下: Public b As Boolean Sub HideUnhide() If b =False Then Rows("2:100").Hidden

    6.4K10

    iOS新闻类App内容页技术探索

    对于扩展区和WebView的衔接,如上图一般有两种实现方案:TableView根据WebView的Inset(或Div占位)插入到WebView中 & WebView作为TableView的Header...对于SubView中的滚动视图,如果ContentSize小于屏幕高度,则作为普通View,否则设置为屏幕高度,通过offset和Frame的计算,动态的调整视图相对Container的Frame以及自身的...我们监听WebView的ContenSize变化,当变化发生时,重新执行获取组件位置的JS语句获得全部组件的新位置。...在此基础上,要动态的检测ContenSize是否小于屏幕高度,高度小于一屏幕时,要同时调整Native扩展区组件的位置。 2....WebView中组件异步拉取数据渲染 对于异步拉取数据的组件,由于初始化时占位Div的高度为0,当数据获取成功,并渲染好组件后,需要首先执行JS动态修改对应占位Div的大小,之后按照以上的逻辑,重新赋值

    2.9K00

    有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

    其实我也很希望自家的应用都像网易那样,固定长度显示新闻,显示不完,就直接截断--可惜那样的应用都是别人公司的应用.可能你会说: 顶部给个非微博正文区域给个固定高度;文字区域动态计算出高度;图片部分,图片高度固定...,根据数量动态计算高度;转发部分同理;然后根据数据在tabelView的代理方法 tableView:heightForRowAtIndexPath: 中动态返回高度即可.是的,思路就是这么个思路,但是你确定产品经理一直不会改需求...,因为你手动调用这个方法产生的cell不会参与cell的复用!...,然后计算cell高度.然后你会发现,凡是稍微涉及到图片显示的界面,你的显示是对的,但是滚动非常卡顿,因为你在自己浑然不觉的情况下创建了N个Cell,而且这些Cell绝对不会参与复用....Masonry — 使用纯代码进行iOS应用的autolayout自适应布局 2.使用 UITableView-FDTemplateLayoutCell 根据单元格内容的约束自适应单元格高度 ?

    92560

    iOS表视图单元格高度自适应

    iOS表视图高度自适应可以节省很多麻烦,尤其是涉及到复杂的业务逻辑时,今天尝试了使用Masonry和FDTemplatelayoutCell来布局表视图单元格,从而达到单元格高度自适应的效果,这里就总结了这其中使用的要点和注意问题...首先,为了实现表视图的单元格高度自适应,我们需要用到Masony和FDTemplatelayoutCell这两个第三方的类库。同时这里使用一个简化的订单界面来说明使用,效果图如下: ?...使用的时候关键步骤包括: 1、注册表视图的单元格 这里分为NIb文件和普通类文件的单元格注册,我使用的是xib文件创建的单元格,代码如下: - (UITableView *)tableView{...; } return _tableView; } 2、返回单元格高度 返回单元格高度我们就不必计算了,使用如下的方法来返回 //单元格高度 - (CGFloat)tableView:(...,所以在返回单元格方法里判断单元格是否存在是没有意义的,getOrderTableViewCell不会调用,在这个方法里设置的布局约束也是无效的。

    1.8K70

    iOS一种动态栅格布局方案

    解决思路 事实上这一块并占不了整个页面,大部分情况下只是在tableView中嵌套一截这样的需求,我公司项目的实现用的一直是webView来实现,但是这样就会有很多不必要的问题,比如webView的高度计算...,如果客户端来计算高度,在一些网络不稳定情况下,webView的资源没有加载完全,高度就会出现偏差,而且webView的加载速度,性能,和js的交互都是很不理想的。...(总之,我大原生就是不爱用h5啦) 这里其实有两种解决方案: 方案1:和后台约定好几种布局样式,客户端根据后台参数来动态显示。...方案2:这块视图看为一个整体,根据json数据将其分为X个子块,理论上可以根据数据无限分割下去。 优缺点: 第一种方案实现简单,而且可以应付日常所需,但是提前约定的格式必定不会太多,不够灵活。...id=1234",我就知道这块需要跳转到商品id为1234的详情页。实现了高度动态化布局和跳转。我也不知道该称之为什么布局,所以暂时称之为栅格化布局。

    1.1K60

    DTCoreText的集成与使用目录一、相关资源二、DTCoreText的集成三、DTCoreText的使用四、可能遇到的错误五、参考链接

    DTCoreText是可以将HTML字符串转化为富文本使用的工具,既保证原生实现又能适应灵活的样式修改,而且相比于使用WebView显示内容在性能上也有很大优势。本篇就这一技术的使用进行总结。...Button,然后就可以很方便的处理响应事件了,其中: //url:Html中的超链接(可以根据需要设置http、tel、mailto等) //identifier:属于该视图的唯一性标识...通过这个单元格类,我们可以方便的设置富文本以及获取单元格高度。以下是使用DTAttributedTextCell显示富文本的核心代码: 3.1....NSArray *dataSource; //当前表视图是否在滑动 @property (nonatomic,assign)BOOL isScrolling; @end 3.2.表视图代理方法返回单元格及其高度...,并更新单元格上的数据 //ZSDTCoreTextCell是自定义的继承于DTCoreTextCell的单元格 - (ZSDTCoreTextCell *)tableView:(UITableView

    4.9K90

    Ios常用第三方框架(二)

    图表 PNChart - 国内开源作者,动态的图表。 swift-linechart - 功能完整、实用的折线图组件。使用方便,参数配置简单。是不可多得的优质组件--swift。...横向展示文本内容的自定义cell - 可以横向展示文本内容的自定义cell,根据文本无限滚动。...MDIHorizontalSectionTableViewController - 根据产品需求开源了一个交互项目,可以理解为横向Section的TableView,section和cell同时支持拖拽...微博cell自动布局 - 使用autoLayout对微博的cell进行自动布局,自适应cell的高度。...实现教程 XWCatergoryView - 一个轻量级的顶部分类视图控件,只需要通过简单的设置,你就可以快速集成该控件, 控件目前暂时有底部横条移动,椭圆背景移动,文字缩放,文字颜色变化,和文字颜色渐变五种效果

    7.7K60

    IOS开发的基础知识建议收藏

    有这样的机制就是说无论你table里的数据有多少,都可以全部放入table中不用分页,因为不用一次性把所有数据都取出来,只在需要显示的时候根据游标去取对应的数据就行了。   ...7.UIWebView渲染范围   UIWebView不是根据可视范围决定每次的渲染范围,而是根据自身控件的frame大小决定。   ...曾尝试webview嵌在tableview里,为了让webview跟tableview一起滚动,把webview的大小设为webview里的内容大小,让webview不出滚动条,从而能跟着tableview...这样做的后果是每次webview都一次性渲染整个页面,内存占用多性能很差,而且在放大缩小这个webview时,渲染放大的整个页面更吃力,出现不能忍受的性能。...解决办法是让webview定住高度为一整屏iphone的高度,限制了webview每次的渲染范围为可视范围,性能大好。带来的问题是无法随tableview滚动,但可以以其他方式优化体验。

    55520

    【IOS开发基础系列】Storyboard专题

    我们修改了模板cell 的高度,但tableView 并不知道。有两个办法:改变table view 的 Row Height 属性,或者修改 heightForRowAtIndexPath 方法。...如果你用拖拽而不是直接键入的方式改变cell 的高度,tableview 的 Row Height 属性也会自动随之改变。         再次运行程序,这次看起来就好多了。...如你所见,当你的数据源用 dequeueReusableCellWithIdentifier向 Table View 请求新的单元格时,TableView并不真正把模板 cell 给你,它只是给你一份模板...其次,你应当确保添加的内容能自动适应单元格尺寸的变化。例如,当你需要表格行能够被删除或移动时 ,Cell 尺寸会发生改变。         ...通过 AutoLayout 可以实现运行时根据设备实际屏幕大小调整控件位置和大小。 4.2 代码实例化故事板中的VC 如何装载Storyboard中的ViewController?

    1.3K30

    常用开发技巧系列(一)

    看看git上它的一个展示效果: image.png 六:你想给你的WebView添加一个头部视图     其实做这个效果有很多很多的方式,你可以把你的WebView加到ScrollView上去,在给它加一个头部的...里面是一个UIWebBrowserView(负责显示WebView的内容),你可以通过调整它的位置来给你的webview添加一个头部。...的高度,使其可见 CGRect frame = webBrowserView.frame; frame.origin.y = CGRectGetMaxY(_backHeadImageView.frame...image.png image.png 这个其实很简单,你只需要处理一下 TableView 的尾部视图,赋一个初始化的View给它就OK了。...比如根据下面滑动视图的滑动来改变导航的透明度这类利用 Runtime 解决的问题,前连天在总结 Runtime 的时候有说过怎么做,感兴趣的朋友可以去翻翻,链接这里。

    882101

    AsyncDisplayKit 2.0 教程:入门「译」

    我们都知道,每个 UITableView 至少都要提供一个 -tableView:heightForRowAtIndexPath: 实现方法,因为每个 cell 的高度都由代理计算和返回。...你可以选择为单元格定义最小和最大尺寸,而不是提供静态高度。这种情况下,你希望每个cell的高度至少为屏幕的 2/3。 现在不用担心太多,这个会在第二部分中介绍。...image.png 真是一个流畅的 tableView!一旦你开始做了,那就让我们做的更好吧! 无限滚动 在大多数应用中,服务器的数据点的个数往往会多于当前 tableView 中显示的单元格数量。...完成后,用新下载的数据更新 tableView 最后,确保 -completeBatchFetching:返回的是YES,即大功告成。在完成操作之前,不会进行新的数据请求。...虽然当时并没有开源,并且有许多地方发生了变化,但看到这一切的开始还是挺有意思的。

    2.2K20

    基于 HTML5 的 Web SCADA 报表

    在以往的工业项目中,所有的表格看起来千篇一律,就是通过数字和简单的背景颜色变化来展示相关信息。...我们根据这些信息,再利用 HTML5 原生的 Canvas API 就可以画出想要的效果。 ...在“风速”列中,我们可以根据风速大小计算一个颜色透明值,来实现同一色系的映射变换,比原来那种非红即绿的报警表,看起来更舒服一些。在“可用率”列,用 Rect 的不同长度变化,来模拟进度条的效果。...为了运行效率考虑,在表格的单元格中绘制 Chart,应该追求简洁大方,一目了然。这几个 Legend 图例小矩形,其实是应该画在表头的。我为了偷懒,就画在了单元格,导致画面显得有点乱。...当然也跟客户端的机器配置有关。可以想象,几万个 Chart的展示以及动态刷新,对于基于dom的控件几乎是件无法完成的任务。

    2.9K30

    有赞移动消息卡片动态化方案实践

    消息原生架构图 方案 关于动态化技术栈的选择 上面介绍了 iOS 端消息卡片渲染架构设计,那么为了让消息卡片具有动态化的能力,但是不会打乱现有原生架构的情况下,我们采用了结合 weex 技术栈来做这件事...weex 卡片的 url 利用 JS 动态库根据消息内容和消息类型来计算原生承载 weex 容器的 TableView 的 cell 宽高 利用 JS 动态库下发需要加载 weex 卡片的消息类型 利用...卡片所在的 cell 的宽高,入参是消息卡片内容和消息类型,JS 将卡片内容解析出来,进行高度、宽度的计算返回给原生。...获取需要支持 weex 卡片的消息类型,原生根据这些类型进行容器 cell 的注册 性能 性能较好,在多个 weex 卡片消息交替出现的时候,为了避免达到性能瓶颈,因此首先考虑到利用原生 TableView...以及 webView 的事件处理 拆分出动态化框架 SDK ,让其他需要用到的业务可以接入,比如一些活动页面 总结 以上是我们整个消息卡片动态化的整体方案,总结来讲就是在原生架构基础上配合 weex

    1.2K20

    基于 HTML5 的 Web SCADA 报表

    在以往的工业项目中,所有的表格看起来千篇一律,就是通过数字和简单的背景颜色变化来展示相关信息。...我们根据这些信息,再利用 HTML5 原生的 Canvas API 就可以画出想要的效果。 ...在“风速”列中,我们可以根据风速大小计算一个颜色透明值,来实现同一色系的映射变换,比原来那种非红即绿的报警表,看起来更舒服一些。在“可用率”列,用 Rect 的不同长度变化,来模拟进度条的效果。...为了运行效率考虑,在表格的单元格中绘制 Chart,应该追求简洁大方,一目了然。这几个 Legend 图例小矩形,其实是应该画在表头的。我为了偷懒,就画在了单元格,导致画面显得有点乱。...当然也跟客户端的机器配置有关。可以想象,几万个 Chart的展示以及动态刷新,对于基于dom的控件几乎是件无法完成的任务。

    3.6K90
    领券