相关问题
HarmonyOS webview嵌套在布局中间,高度和滚动问题
390浏览 • 1回复 待解决
基于滚动组件的手势处理
330浏览 • 1回复 待解决
如何实现嵌套滚动技术
921浏览 • 1回复 待解决
嵌套滚动回滑,在一些常见的商品预览页,会出现嵌套滚动的场景
637浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
2490浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
1910浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
1084浏览 • 1回复 待解决
在嵌套滚动容器的场景下,通过parallelGesture监听子列表手势。会导致滚动异常
1494浏览 • 1回复 待解决
WebView 页面在windows模拟器无法出现滚动条滚动
448浏览 • 1回复 待解决
怎么判断webview滚动到最下方?
216浏览 • 2回复 待解决
HarmonyOS 如何检测webview滚动是否触底
252浏览 • 1回复 待解决
RelativeContainer 里面嵌套子组件 text ,如何基于 text 的内容自适应高度?
222浏览 • 1回复 待解决
#鸿蒙学习大百科#如何设置嵌套滚动模式?
97浏览 • 1回复 待解决
商品展示筛选页面的嵌套滚动及回滑效果
829浏览 • 1回复 待解决
web组件嵌套滚动在折叠屏展开后收起时其滚动位置会发生变化
53浏览 • 1回复 待解决
如何获得WebView页面的渲染或滚动时机呢
7308浏览 • 1回复 待解决
HarmonyOS web.webview 嵌套H5(网页)相互通信
267浏览 • 1回复 待解决
鸿蒙scrollview 嵌套 webview 在滑动过程中遮挡 下面的组件
7361浏览 • 1回复 已解决
web组件和list嵌套滚动,在出现list后向下滑动,出现web滑动list不动的情况
1753浏览 • 1回复 待解决
基于TLSSocket的通信能力
336浏览 • 1回复 待解决
基于RichEditor的评论编辑
541浏览 • 1回复 待解决
如何获取List组件滚动条滚动的距离
2382浏览 • 1回复 待解决
滚动视图联动:实现多List联动滚动,横竖向滚动
1031浏览 • 1回复 待解决
基于原生的水印添加能力
606浏览 • 1回复 待解决
内嵌的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
自身先滚动,自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后,如果父组件有边缘效果,则父组件触发边缘效果,否则子组件触发边缘效果。
PARENT_FIRST
2
父组件先滚动,父组件滚动到边缘以后自身滚动。自身滚动到边缘后,如果有边缘效果,会触发自身的边缘效果,否则触发父组件的边缘效果。
PARALLEL
3
自身和父组件同时滚动,自身和父组件都到达边缘以后,如果自身有边缘效果,则自身触发边缘效果,否则父组件触发边缘效果。
场景一:
长web页面全量展开嵌套滚动,例如应用首页或新闻类应用新闻详情页
方案
整体实现效果为: Scroll嵌套web组件且web组件全量展开。
实现方法:通过web组件的type属性设置为1,即全量展开且嵌套滚动场景,并且layoutMode接口用来设置web页面是否全量展开,如需全量展开则设置参数为WebLayoutMode.FIT_CONTENT,nestedScroll接口用来设置web组件与上下层组件的嵌套滚动关系,推荐使用子组件优先模式(NestedScrollMode.SELF_FIRST)。
核心代码
场景二:
多个容器嵌套web滚动,例如首页由Scroll嵌套Tabs,Tabs嵌套Web组件来实现。
方案
整体实现效果为:页面整体为一个Scroll,Scroll中嵌套一个Tabs组件,Tabs里有多个web组件可以实现首页效果。
实现方法:基于web组件的nestedScroll属性实现嵌套在Tabs中的web页面平滑滚动,以及左右滑动切换tab,该方案的核心就是滑动Web组件,未被消费的x轴、y轴的滚动偏移量,传递给最近的、滚动方向一致的父组件。
核心代码