开发过程中经常会碰到这样的需求，顶部是自定义的UIView,下面是使用webView,然后实现一起滚动。需求如下图：
[图片上传失败...(image-49b65c-1531367583533)]
实现思路也简单，可以使用UIScrollView为父视图，自定义view和webView作为子视图，或者使用UITableView,自定义view作为tableHeaderView，webView添加到UITableViewCell上。关键是如何获取高度。这里通过监听webView的contentSize的变化来获取高度，然后更新webView的高度，进而更新UIScrollView的可滚动区域实现滚动。
image.png
具体demo实现，实现方式采用UIScrollView + Snapkit布局
import UIKit
import SnapKit
import WebKit
class ViewController: UIViewController {
lazy var webView: WKWebView = {
let web = WKWebView()
web.navigationDelegate = self
web.scrollView.isScrollEnabled = false
web.scrollView.bounces = false
return web
}()
lazy var scrollView: UIScrollView = {
let scroll = UIScrollView()
return scroll
}()
lazy var contentView: UIView = {
return UIView()
}()
lazy var customView: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.backgroundColor = UIColor.gray
return label
}()
var observing = false
override func viewDidLoad() {
super.viewDidLoad()
addSubViews()
addConstraints()
loadWebView()
}
func addSubViews() {
view.addSubview(scrollView)
scrollView.addSubview(contentView)
contentView.addSubview(customView)
contentView.addSubview(webView)
}
func addConstraints() {
scrollView.snp.makeConstraints { (make) in
make.left.right.top.bottom.equalToSuperview()
}
contentView.snp.makeConstraints { (make) in
make.top.bottom.equalToSuperview()
make.left.right.equalTo(view)
}
customView.snp.makeConstraints { (make) in
make.left.right.top.equalToSuperview().inset(20)
}
webView.snp.makeConstraints { (make) in
make.left.right.equalToSuperview().inset(20)
make.top.equalTo(customView.snp.bottom).offset(20)
make.height.equalTo(400)
make.bottom.equalToSuperview().offset(-20) // 需要设置距离底部的约束，否则无法计算contentSize
}
}
func addWebViewObserver() {
observing = true
webView.scrollView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
}
func removeWebViewObserver() {
webView.scrollView.removeObserver(self, forKeyPath: "contentSize", context: nil)
observing = false
}
func loadWebView() {
customView.text = "在强者的眼中，没有最好，只有更好。盆景秀木正因为被人溺爱，才破灭了成为栋梁之材的梦。永远都不要放弃自己，勇往直前，直至成功！没有平日的失败，就没有最终的成功。重要的是分析失败原因并吸取教训。蝴蝶如要在百花园里得到飞舞的欢乐，那首先得忍受与蛹决裂的痛苦。萤火虫的光点虽然微弱，但亮着便是向黑暗挑战。面对人生旅途中的挫折与磨难，我们不仅要有勇气，更要有坚强的信念。对坚强的人来说，不幸就像铁犁一样开垦着他内心的大地，虽然痛，却可以播种。想而奋进的过程，其意义远大于未知的结果。"
webView.load(URLRequest(url: URL(string: "https://www.baidu.com/")!))
}
func updateWebViewHeight(_ height: CGFloat) {
webView.snp.updateConstraints { (make) in
make.height.equalTo(height)
}
}
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
guard let keyPath = keyPath else {
super.observeValue(forKeyPath: nil, of: object, change: change, context: context)
return
}
if keyPath == "contentSize" {
updateWebViewHeight(webView.scrollView.contentSize.height)
}
}
deinit {
removeWebViewObserver()
}
}
extension ViewController: WKNavigationDelegate {
// 网页加载完成，开始监听内容高度变化,不断更新高度，增大滚动区域
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
updateWebViewHeight(webView.scrollView.contentSize.height)
if (!observing) { addWebViewObserver() }
}
func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
let cred = URLCredential.init(trust: challenge.protectionSpace.serverTrust!)
completionHandler(.useCredential, cred)
}
}
代码简单，关键是注意几点：
1）通过添加容器视图contentView为scrollView自动计算滚动区域，不熟悉的可以看我前面一篇文章。
2）在网页加载吃完之后开始监听contentSize的变化，并不断更新webView的高度。这里会监听到contentSize不断的变化，因为内容在不断的加载，所以值也在不断变化，而且很多相同的值。自己可以对相同的值进行过滤操作，减少不必要的操作。如下部分高度值：
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
1908.0
4272.0
4272.0
4272.0
4272.0
4272.0
...
3）实际的开发过程中，往往有可能是先加载本地的html，或者服务端给的一段html内容，然后请求数据，再向html中插入内容。在这种情况下，有时候最终的显示的滚动视图可能是对的，滚动到底部能够看到所有的内容，但是有时候也可能出现滚动的区域大于有效的显示内容。即所有内容看完之后还会存在一部分高度导致空白部分。会出现这种情况是因为加载的内容包含了图片，由于图片的加载和显示问题，当图片的大小和实际显示的大小显示不一致，导致了webView再监听contentSize的时候，出现了最大的contentSize之后，对于小的contentSize我们将获取不到，从而没有更新webView的高度，导致部分空白现象。这种情况可以跟前端讨论，处理图片的加载流程，保证高度内容一步一步增大。这样，我们就能够监听到正确的高度并显示。
实现效果图如下：
网友评论