鸿蒙开发实践——基于webView的嵌套滚动

最新推荐文章于 2025-09-30 02:26:53 发布
原创 最新推荐文章于 2025-09-30 02:26:53 发布 · 678 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #webView #鸿蒙开发 #移动开发 #布局 #组件化 #ArkUI

场景描述

内嵌的ArkUI可滚动容器中的Web组件，接收到滑动手势事件，实现在父组件中嵌套一个web组件可以平滑滚动。

  • 场景一：招行首页、新闻类应用新闻详情页：在scroll组件中嵌套一个webview并且webview全量展开。

  • 场景二：同花顺首页由Scroll嵌套Tabs，Tabs嵌套Web组件来实现。

方案描述

内嵌在可滚动容器（Scroll、List...）中的Web组件，接收到滑动手势事件，需要对接ArkUI框架的NestedScrollMode枚举类型，使得Web组件可以嵌套ArkUI可滚动容器，进行嵌套滚动。

nestedScroll入参为一个NestedScrollOptions对象，该对象具有两个属性，分别为scrollForward和scrollBackward，每一个属性都为一个NestedScrollMode枚举类型。NestedScrollMode枚举类型如下表。

名称

值

描述

SELF_ONLY

0

只自身滚动，不与父组件联动。

SELF_FIRST

1

自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发
最低0.47元/天 解锁文章
鸿蒙开发（17）---WebView组件
李元静
07-07 7383
目录WebView组件 WebView组件
鸿蒙星空的太白星 | WebView给元服务调用JS API指明方向
Mayism123的博客
06-27 545
查阅了高德、百度、华为、腾讯地图能力的后发现，各大厂商对鸿蒙系统的支持能力参差不齐，都没有提供鸿蒙可用的SDK。最初的思路被局限在通过鸿蒙的JS集成地图的JS API来实现，但是最终被各种报错而折磨不堪。开发此类元服务过程中通常需要用到地图功能，例如在景区类型元服务的卡片中显示我的位置信息，通过推荐路线提供景区最佳游览路线。在万物互联时代，提供了更丰富的入口、更智能的分发、更高效的转化，助力开发者快速抢占流量入口。天空中最亮的星，太白星，在薄云中依然闪耀，如同海上迷雾中的灯塔，为迷失方向的船只指明方向。
Weex鸿蒙Web组件开发：从WebView到ArkUI
最新发布
gitblog_00109的博客
09-30 351
随着移动应用开发跨平台需求的日益增长，传统WebView在性能和用户体验上的局限性逐渐显现。Weex作为阿里巴巴开源的跨平台UI框架，通过鸿蒙化改造，成功将Web组件升级至ArkUI架构，实现了性能飞跃与生态融合。本文将深入剖析这一技术演进过程，从环境搭建到高级功能开发，为开发者提供完整的迁移指南。 ## 框架演进：从WebView到ArkWeb Weex鸿蒙化方案摒弃了传统WebView架构...
第十六天 HarmonyOS WebView开发实战：从加载网页到与JavaScript交互
IT深耕十余载，大道之简
02-17 1582
通过本文的实践指导，开发者可以全面掌握HarmonyOS中WebView的核心使用方法。从基础网页加载到深度混合开发，从性能优化到调试技巧，这些知识将帮助您构建高效、稳定的Web混合应用。建议读者结合官方文档和实际项目需求，持续探索WebView的更多可能性。
基于webView的嵌套滚动
hongxiaomeng的博客
06-04 598
【愚公系列】2023年12月 HarmonyOS教学课程 054-Web组件（基本使用和属性）
热门推荐
时光隧道
12-25 8万+
Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络，使用户能够通过浏览器访问和交互式使用各种信息和资源，如网页、文档、图片、视频、音频等。通过Web，用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议（HTTP），超文本标记语言（HTML）和统一资源定位器（URL）。HarmonyOS中的Web组件是一种基于Web技术的组件，可以在HarmonyOS应用程序中嵌入Web内容。
HarmonyOS 开发实践——基于webView的嵌套滚动
liuhaojiabin的博客
11-03 845
实现方法：通过web组件的type属性设置为1，即全量展开且嵌套滚动场景，并且layoutMode接口用来设置web页面是否全量展开，如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT，nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系，推荐使用子组件优先模式（NestedScrollMode.SELF_FIRST）。整体实现效果为：页面整体为一个Scroll，Scroll中嵌套一个Tabs组件，Tabs里有多个web组件可以实现首页效果。
HarmonyOS 开发实践 —— 基于webview的嵌套滚动及与ArkUI组件的联动
liuhaojiabin的博客
11-18 890
在以上dom树的示例中，可以看出来父组件List中有两个listItem子组件和两个封装的web组件，封装的类里面是有一个Stack父组件以及web和column两个子组件，分别加载web页面和展开更多的文本。给web页面一个最小高度，这样就可实现以上List列表的效果，当用户想查看详情的时候，就可以点击展开更多，通过这个点击事件将web加载时拿到的页面高度在变量里取出来，赋值到web组件的高度上，这样就可以实现点击展开详情页的效果，滑动到最下面后再点击收起把web的高度恢复到最小值即可。
HarmonyOS 实战开发 —— 基于webView的嵌套滚动
CTrup的博客
11-12 725
实现方法：通过web组件的type属性设置为1，即全量展开且嵌套滚动场景，并且layoutMode接口用来设置web页面是否全量展开，如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT，nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系，推荐使用子组件优先模式（NestedScrollMode.SELF_FIRST）。整体实现效果为：页面整体为一个Scroll，Scroll中嵌套一个Tabs组件，Tabs里有多个web组件可以实现首页效果。
HarmonyOS 实战开发 —— 基于webview的嵌套滚动及与ArkUI组件的联动
CTrup的博客
11-27 1089
在以上dom树的示例中，可以看出来父组件List中有两个listItem子组件和两个封装的web组件，封装的类里面是有一个Stack父组件以及web和column两个子组件，分别加载web页面和展开更多的文本。给web页面一个最小高度，这样就可实现以上List列表的效果，当用户想查看详情的时候，就可以点击展开更多，通过这个点击事件将web加载时拿到的页面高度在变量里取出来，赋值到web组件的高度上，这样就可以实现点击展开详情页的效果，滑动到最下面后再点击收起把web的高度恢复到最小值即可。
鸿蒙 Next 开发实践：使用 WebView 适配移动端网站
小淼淼的博客
02-06 4251
WebView 是鸿蒙 Next 提供的一个用于加载网页的组件。它支持加载本地 HTML 文件或网络 URL，并且可以与原生应用进行交互。通过 WebView，我们可以在鸿蒙应用中无缝嵌入网页内容。通过鸿蒙 Next 的 WebView 组件，我们可以轻松地将已有的移动端网站嵌入到原生应用中。这不仅可以节省开发时间，还可以充分利用现有的网页资源。在实际开发中，需要注意网页的适配性、交互体验和安全问题，以提供更好的用户体验。t=O83A。
鸿蒙关于可以实现滚动效果的容器组件的相关知识
qq_43474235的博客
08-18 1925
在开发的过程中，用户在使用app的过程中对于滚动条样式审美的提升，不断向开发人员提出建议，开发人员不得不改变滚动条样式。通过使用ScrollBar组件（需要和Grid公用同一个Scroller）来自定义样式。Grid的属性属性名类型说明scrollBarBarState设置滚动条状态。默认值：BarState.autoBarState.off 关闭BarState.on 常驻BarState.auto 按需显示设置滚动条的颜色。设置滚动条的宽度。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
zy0412326的专栏
03-05 1655
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件。
WebView一直显示滚动条
xm52013的博客
06-14 2994
WebView默认无间隔到一定时间后就会自动隐藏滚动条，这里可以通过设置 android:fadeScrollbars="false" 即可不自动隐藏滚动条。
AndroidTV开发10实现自定义WebView滚动条及颜色
u012556114的博客
02-08 2095
最近一直在做TV开发，有个需求是Webview需要显示滚动条，并且获得焦点时显示一种自定义颜色的滚动条，失去焦点时隐藏滚动条，于是研究了一番，用自定义的方式实现了。 1.代码如下： private fun initView() { webView!!.apply { webView!!.settings.apply { javaScriptEnabled = true domStorageEnabled = true useWideViewPort = false loadWithOverviewMode
鸿蒙NEXT版实战开发：通用属性width是否支持设置变量？
qq_39652397的博客
04-16 230
通用属性width是否支持设置变量.........
一文吃透 HarmonyOS 的 Scroll 滚动组件，从入门到精通
2401_86731168的博客
07-11 1172
本文围绕 HarmonyOS 的 Scroll 滚动组件展开，介绍其作为可滚动容器的基础特性，包括支持单个子组件、需内容尺寸超容器尺寸才滚动等。详解核心属性（滚动方向、滚动条样式、边缘效果等）、常用事件（滚动前后、开始停止、到边缘等）及 Scroller 控制器的各类操作（滚动到指定位置、翻页、惯性滚动等），还涵盖嵌套滚动实现方式与实用技巧，助力开发者掌握其使用，打造流畅滚动体验
javafx-webview加载网页后滚动条自动滚动到指定位置
随笔
10-31 566
javafx-webview加载网页后滚动条自动滚动到指定位置
鸿蒙5.0实战案例：基于webView的嵌套滚动
Maniu_666的博客
03-20 684
实现方法：通过web组件的type属性设置为1，即全量展开且嵌套滚动场景，并且layoutMode接口用来设置web页面是否全量展开，如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT，nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系，推荐使用子组件优先模式（NestedScrollMode.SELF_FIRST）。整体实现效果为：页面整体为一个Scroll，Scroll中嵌套一个Tabs组件，Tabs里有多个web组件可以实现首页效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值