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

如何在WKWebView中一次滚动一个视图的高度(而不是页面)

在WKWebView中一次滚动一个视图的高度,可以通过以下步骤实现:

  1. 首先,需要获取WKWebView的内容高度和视图高度。可以使用WKWebView的scrollView属性来获取内容高度,使用WKWebView的frame属性来获取视图高度。
  2. 接下来,需要设置WKWebView的scrollView的delegate,并实现UIScrollViewDelegate的方法。
  3. 在scrollViewDidScroll方法中,判断当前滚动的位置是否超过一个视图的高度。可以通过比较当前滚动的偏移量和一个视图的高度来判断。
  4. 如果超过一个视图的高度,可以使用scrollView的setContentOffset方法来滚动到下一个视图的位置。可以通过当前滚动的偏移量加上一个视图的高度来计算下一个视图的位置。

以下是一个示例代码:

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

class ViewController: UIViewController, WKNavigationDelegate, UIScrollViewDelegate {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建WKWebView
        webView = WKWebView(frame: view.bounds)
        webView.navigationDelegate = self
        webView.scrollView.delegate = self
        view.addSubview(webView)
        
        // 加载网页
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    // WKWebView加载完成后调用
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 获取内容高度
        let contentHeight = webView.scrollView.contentSize.height
        // 获取视图高度
        let viewHeight = webView.frame.size.height
        
        // 设置滚动范围
        webView.scrollView.contentSize = CGSize(width: webView.scrollView.contentSize.width, height: contentHeight + viewHeight)
    }
    
    // 滚动时调用
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // 获取当前滚动的偏移量
        let offsetY = scrollView.contentOffset.y
        // 获取视图高度
        let viewHeight = scrollView.frame.size.height
        
        // 判断是否超过一个视图的高度
        if offsetY >= viewHeight {
            // 计算下一个视图的位置
            let nextOffsetY = offsetY + viewHeight
            // 滚动到下一个视图的位置
            scrollView.setContentOffset(CGPoint(x: 0, y: nextOffsetY), animated: true)
        }
    }
}

这样,当用户在WKWebView中滚动时,视图会一次滚动一个视图的高度。请注意,这只是一个示例代码,实际使用时需要根据具体情况进行调整。

推荐的腾讯云相关产品:腾讯云移动浏览器网页开发服务。该服务提供了一套完整的移动浏览器网页开发解决方案,包括了浏览器内核、开发工具和云服务等,可帮助开发者快速构建高性能、安全可靠的移动浏览器网页应用。详情请参考腾讯云移动浏览器网页开发服务官方文档:移动浏览器网页开发服务

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

相关·内容

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

何在页面中合理处理WebView与扩展区中多种View协同滚动,灵活扩展,并且支持下拉刷新、上拉加载等操作,不同新闻类App也有不同技术方案。 1....对于SubView中滚动视图,如果ContentSize小于屏幕高度,则作为普通View,否则设置为屏幕高度,通过offset和Frame计算,动态调整视图相对ContainerFrame以及自身...主流滚动复用框架 继承特殊ScrollView: 目前流行框架alibab LazyScrollView ,对于实现复用回收机制,都需要继承相应ScrollView,这种方式对于WKWebView...View滚动状态简单: 滚动时位置计算,最简单方式就是根据屏幕高度计算是否进入屏幕,对于预加载需求,绝大部分开源框架也是只是在屏幕区域上下增加了Buffer,仍然不能区分具体状态,进入buffer...页面内组件滚动复用及页面组件复用,也同时减少了组件View初始化耗时。 其它通用方法: 基于App技术实现和业务逻辑优化,异步执行业务逻辑、 图片编解码优化及资源缓存,DNS缓存等。

2.9K00

WKWebView

拥有60fps滚动刷新率,页面更流畅。...你还可以使用 setMagnification:centeredAtPoint: 以编程方式设置Web内容第一在Web视图中显示缩放比例。 此后,用户可以使用手势来改变比例。...用指定frame和configuration初始化视图。 查看web信息 scrollView。与WebView相关联滚动视图。 title。页面标题 URL。...显示加载进度条 我们可以通过监听WKWebViewestimatedProgress属性值来实现一个加载进度条,UIWebView只能是通过timer事件做一个加载进度条。...7,本文主要介绍了如何通过WKWebView来展示一个页面,其实,WKWebView不仅仅只有展示功能,它还能够和Native进行交互。而且iOS中web应用,起重点就是与Native进行交互。

6K20

UI篇- UIWebView使用大全

这里特别说一下,对于一个工程中整个就是一个WebView情况,你可以通过一些设置来使整个工程显得接近于原生开发APP,这样你是有机会被审核通过。...根据导航类型参数可以得到请求发起原因 //当网页视图被指示载入内容得到通知应该返回是,这样会进行加载通过导航类型参数可以得到请求发起原因,可以是以下任意值: - (BOOL)webView:(UIWebView...: 有时候需要根据不同内容调整UIWebView高度,以使UIWebView刚好装下所有内容,不用拖动,后面也不会留白。...OC中给JS传参数,如何在OC中获取到JS传递过来参数 如果要实现这样JS和OC数据交互,需要使用到一个第三方文件:WebViewJavascriptBridge 给web发消息 @property...UIWebView在 iOS11中使用。 ? UIWebView 在iOS 11上 当顶部 y值设为 0 时,是依然无法盖住UIStatusBar区域,但是滚动时就会出现问题了。

1.9K10

同层渲染

WKWebView 在内部采用是分层方式进行渲染,它会将 WebKit 内核生成 Compositing Layer(合成层)渲染成 iOS 上一个 WKCompositingView,这是一个客户端原生...DOM 节点高度子节点,WKWebView 会为该 DOM 节点生成一个 WKChildScrollView,与 DOM 节点存在映射关系。...这是一个原生 UIScrollView 子类,也就是说 WebView 里滚动实际上是由真正原生滚动组件来承载WKWebView 这么做是为了可以让 iOS 上 WebView 滚动有更流畅体验...根据 WKWebView 该特性,我们便可以建立 H5 组件与原生组件之间映射关系,并且保证原生组件与 H5 组件在同一个层级上。...下插入一个高度超过该 DOM 节点高度子节点,这一点很重要,否则不会生成; 前端传递给客户端查找到该 DOM 节点对应 WKChildScrollView 原生组件必要信息; 客户端根据前端传来相关信息找到对应原生组件

1.4K21

IOS WebView控件详解

概述 WebView就是一个内嵌浏览器控件,在iOS中主要有两种WebView:UIWebView和WKWebView,UIWebView是iOS2之后开始使用,WKWebView是在iOS8开始使用,...相比UIWebView,WKWebView做了如下优化: WKWebView更多支持HTML5特性 WKWebView更快,占用内存可能只有UIWebView1/3 ~ 1/4 WKWebView...高达60fps滚动刷新率和丰富内置手势 WKWebView具有Safari相同JavaScript引擎 WKWebView增加了加载进度属性 UIWebView UIWebView继承与UIView...其加载数据方式有三种: 第一种: - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用一种方式,通过一个网页URL来进行加载,这个URL可以是远程也可以是本地...WKWebView是iOS8中出一个新控件,算是对UIWebVeiw升级版。

4.6K80

微信小程序实践:2.3 可滚动容器组件之 scroll-view

在vue、小程序中到处都是这样响应式控制机制,不是直接去调用页面上组件方法,只是给组件属性设置一个值,然后静静地等待组件自己更新。...不是没有滚动,而是滚动冲抵了,scroll-top已经不一样了。 但是这个属性在某种情况下会给开发者带来意想不到bug。 vue作为响应式框架,视图自动响应数据更新重新渲染。...滚动事件是scroll,并不是scroll派发一,scrolltoupper派发一;也不是scroll派发三或五,scrolltoupper派发一。是毫无规律可言。...默认情况下,WXS在视图层执行,与页面JS中代码不是一路,后者是在逻辑层执行微信官方文档所讲,WXS是一套不一样脚本语言,它是WeXin Script简写。...拿到windowHeight之后,它还不是scroll-view应有的高度,因为页面上还可能有自定义底部导航栏、顶部导航栏,这些高度也要减去。

14.6K30

iOS小技能:WKWebView与JS交互

(合成层)渲染成 iOS 上一个 WKCompositingView,这是一个客户端原生 View,不过可惜是,内核一般会将多个 DOM 节点渲染到一个 Compositing Layer 上,因此合成层与...会为其生成一个 WKChildScrollView,与 DOM 节点存在映射关系,这是一个原生 UIScrollView 子类,也就是说 WebView 里滚动实际上是由真正原生滚动组件来承载...WKWebView 这么做是为了可以让 iOS 上 WebView 滚动有更流畅体验。...虽说 WKChildScrollView 也是原生组件,但 WebKit 内核已经处理了它与其他 DOM 节点之间层级关系,因此你可以直接使用 WXSS 控制层级不必担心遮挡问题。...WebContent进程:主要负责页面资源管理,包含前进后退历史,pageCache,页面资源解析、渲染。并把该进程中各类事件通过代理方式通知给 UIProcess。

6.1K30

技术 | 从零开始,实现你小程序

从App类来看就非常类似AppDelegate,这是一个App起始,App状态如从前台切换到后台等,都应该从这里出发并且一个App在小程序应用生命周期内只允许实例化一。...Page类特点就非常类似UIViewController,它代表了一个页面的生命周期,以及它自有逻辑,比如:一个页面的进入,一个页面的退出,都应该在Page类中有所体现。...,如果你想渲染成UIView,那么就需要编译Native对应render engine中view DSL,其实这个实现也不难,在JS这边只需要构建出来一个描述数据,在render方法中不是类似JSX...那么在Page逻辑类中,你调用了setData方法来更新视图,该如何做呢?通过bridge将数据发送给WKWebView,wk中某个方法接收到了之后,启动diff,重新生成vdom,最后来更新视图。...因为你编写视图:,逻辑:Page({data:{}}),是没法直接运行在浏览器中,你需要一个完整运行环境来开发你小程序,自然而然IDE作用就是帮助你解决运行环境问题

88630

小程序白屏问题和内存研究

三端脚本执行环境以及用于渲染非原生组件环境是各不相同[1]: 在 iOS 上,小程序逻辑层 javascript 代码运行在 JavaScriptCore 中,视图层是由 WKWebView 来渲染...在Apple公司开发者文档网站上,有对WKWebView进行介绍,简单来说,WKWebView一个为app内置浏览器渲染交互式网页内容组件,用于替换老版本UIWebView组件[2]。...不管是UIWebView,还是WKWebView,它们都属于IOS WebView。我们可以把WebView理解为手机操作系统一个系统级组件。...WKWebview刚推出时,在IOS8.0~8.2会偶尔出现白屏 由于滚动组件嵌套结构,不刷新问题。 针对原因3,解决方案是判断IOS系统版本,小于8.2使用UIWebView。...通过navigateTo打开新页面,上一个页面进入页面栈,并且该页面只是hide,并不是unload[11]。小程序框架页面栈最多可支持10层页面

2.1K11

网易严选wkwebview测试之路

WKWebView网页加载速度大有提升,占用更少内存。   ...WKWebView相比于UIWebView   WKWebView内存远远没有UIWebView开销大,没有缓存   拥有高达60FPS滚动刷新率及内置手势   支持了更多HTML5特性   高效...  以前UIWebView会自动去NSHTTPCookieStorage中读取cookie,但是WKWebView并不会去读取,因此导致cookie丢失以及一系列问题,在测试过程中我们发现在一个活动页面触发了登录之后...从上图可以明显看出来,wk在内存消耗方面还是有显著提升,尤其是针对性能较差机器,ios9系统5s。   ...最后,WKWebView相较于UIWebView在整体上有较大提升,满足OS上面使用同一套控件功能,同时对整个内存开销以及滚动刷新率和JS交互做了优化处理。

1.7K10

Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

引擎; WKWebView 增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , UIWebView 是自动注入 cookie...js 交互; 注意: 大多数App需要支持 iOS7 以上版本, WKWebView 只在 iOS8 后才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView ,iOS8 后用...检测 webView.title 是否为空 并不是所有 H5 页面白屏时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗 H5 页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...页面滚动速率 WKWebView 需要通过 scrollView delegate 调整滚动速率: - (void)scrollViewWillBeginDragging:(UIScrollView

3.1K00

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

你可以精确地设定总共倒计时间,倒计时最大值为23小时59分钟。 使用日期时间选择器来让用户选择时间,不是让用户自己输入一个包含了日期、时间等多个部分时间值。...4.3.8 页面控件 页面控件告诉用户当前共打开了多少个视图,还有他们正处在其中哪一个。 ? API注释 想要了解如何在代码中定义页面控件,可以参考UIPageControls....如果你需要展示备选项数量很多,考虑使用表格视图(Table View)不是选择器。因为表格视图高度较大,内容滚动起来会更快。...一般来说,文本框左侧用于表述文本框含义,右侧用于展示附加功能,书签。 合适的话,在文本框右侧加入清除按钮。...横屏模式下警告框高度会受到限制,其大小与竖屏下可能会有区别。我们推荐您限定好警告框最大高度,保证在竖屏和横屏模式下文字均能不需要滚动便可完整地显示。 一般情况下,使用两个按钮警告框。

13.2K30

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

标签栏: 是半透明 始终出现在屏幕底部 一个标签栏一最多可承载5个标签(多于5个标签时候,可以展示前4个标签和一个“更多”,并将其他标签以列表形式收纳到“更多”里面) 在横屏与竖屏情况下,高度均保持一致...下图是iOS模拟器中翻页样式: ? API注释 想要了解如何在代码中定义图片视图,请参考Page View Controllers. 页面视图控制器: 带滚动页面视图控制器没有默认外观。...使用滚动条效果时候,当前页面滚动到下一页;而使用翻页效果时,页面上会出现一个模拟实体书或笔记本翻页效果翻页动画 使用页面视图控制器来展示那些线性内容(比如一个故事文本),或者是一些可以被自然地拆分成块内容...想要了解更多,请参考下文控件中页面控件部分内容。 一般来说,一只展示一个滚动视图。由于用户滚动屏幕时动作幅度经常都会很大,如果在一屏中同时存在不止一个滚动视图,他们很容易会碰到另一个。...文本视图: 是一个可定义为任何高度矩形 当内容太多超出视图边框时,文本视图支持滚动 支持自定义字体、颜色和对齐方式(默认情况下,文本视图会以左对齐黑色系统字体显示) 可以支持用户编辑,当用户轻击文本视图内部时

10.1K51

【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , UIWebView 是自动注入 cookie ; WKWebView...: 大多数App需要支持 iOS7 以上版本, WKWebView 只在 iOS8 后才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView , iOS8 后用 WKWebView...检测 webView.title 是否为空 并不是所有 H5 页面白屏时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗 H5 页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...页面滚动速率 WKWebView 需要通过 scrollViewdelegate 调整滚动速率: - (void)scrollViewWillBeginDragging:(UIScrollView *)

2.3K20

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

微信客户端为小程序运行提供了框架支持,service运行环境、页面缓存机制以及控件原生化支持等,本文将对这些部分实现原理做一一介绍。 6....div滚动滚动移动,并且超出div区域内容应该被裁掉,但是由于原生控件是直接插入到webview下,与div之间没有关联,所以不会跟随移动也不会被裁减,在表现上会出现与开发者预期不一致情况,影响用户体验...为了解决这一问题,客户端尝试对WKWebView解析HTML元素原理进行分析,WKWebView在进行HTML解析时,会根据页面DOM元素在WKWebView控件下生成对应iOS原生控件,通过分析,...WKWebView解析HTML在客户端生成对应原生控件示例) 如上图所示,WKWebView将在解析HTML时将该标签位置生成一个对应UIScrollView控件。...(大小位置均一致),保存其对象指针,并分配一个id返回给WEB端; c、当WEB端插入原生控件时,通过接口传入id通知客户端:该原生控件属于哪个div滚动条,客户端找到该滚动条对应原生UIScrollView

2.8K40

Hybrid App 应用开发中 9 个必备知识点复习

引擎; WKWebView 增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , UIWebView 是自动注入 cookie...js 交互; 注意: 大多数App需要支持 iOS7 以上版本, WKWebView 只在 iOS8 后才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView , iOS8...检测 webView.title 是否为空 并不是所有 H5 页面白屏时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗 H5 页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...页面滚动速率 WKWebView 需要通过 scrollViewdelegate 调整滚动速率: - (void)scrollViewWillBeginDragging:(UIScrollView

2.6K20

Hybrid App 应用开发中 9 个必备知识点复习

增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , UIWebView 是自动注入 cookie ; WKWebView...: 大多数App需要支持 iOS7 以上版本, WKWebView 只在 iOS8 后才能用,所以需要一个兼容性方案,既 iOS7 下用 UIWebView , iOS8 后用 WKWebView...检测 webView.title 是否为空 并不是所有 H5 页面白屏时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗 H5 页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...页面滚动速率 WKWebView 需要通过 scrollViewdelegate 调整滚动速率: - (void)scrollViewWillBeginDragging:(UIScrollView *)

2.3K30

Android开发笔记(一百三十五)应用栏布局AppBarLayout

RecyclerView是其中一个特工,它可用来替代ListView和GridView;替代ScrollView则另有其人,它便是嵌套滚动视图NestedScrollView,在Android5.0之后...NestedScrollView继承自FrameLayout,其用法与ScrollView相似,都必须且只能带一个直接子视图,都是允许视图上下滚动等等。...1、AppBarLayout滚动依赖于主体视图滚动,与主体视图相对应,可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分,那么就存在谁先滚谁后滚问题了。...3、大家都知道ViewPager是左右滚动翻页视图,用户通过手势把页面横向拉动一段距离后松开,系统会判断接下来是自动左滚还是自动右滚,总之最后用户看到一个完整页面不是拉到一半页面。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化工具栏,不会完全看不到工具栏。具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度

1.9K40
领券