相关问题
如何实现嵌套滚动技术
376浏览 • 1回复 待解决
嵌套滚动回滑,在一些常见的商品预览页,会出现嵌套滚动的场景
334浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
1243浏览 • 1回复 待解决
scroll中嵌套一个或多个grid,如何实现嵌套滚动?
485浏览 • 0回复 待解决
在嵌套滚动容器的场景下,通过parallelGesture监听子列表手势。会导致滚动异常
374浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
443浏览 • 1回复 待解决
商品展示筛选页面的嵌套滚动及回滑效果
419浏览 • 1回复 待解决
如何获得WebView页面的渲染或滚动时机呢
5870浏览 • 1回复 待解决
鸿蒙scrollview 嵌套 webview 在滑动过程中遮挡 下面的组件
5869浏览 • 1回复 已解决
web组件和list嵌套滚动,在出现list后向下滑动,出现web滑动list不动的情况
493浏览 • 1回复 待解决
如何获取List组件滚动条滚动的距离
785浏览 • 1回复 待解决
scroll和list的嵌套滑动
394浏览 • 1回复 待解决
滚动视图联动:实现多List联动滚动,横竖向滚动
351浏览 • 1回复 待解决
基于原生的水印添加能力
187浏览 • 1回复 待解决
鸿蒙是基于Android的吗?
9829浏览 • 2回复 已解决
ScrollView嵌套ListContainer
5160浏览 • 5回复 待解决
基于RichEditor的评论编辑
178浏览 • 1回复 待解决
arkTs 表格中过长文字的滚动显示,类似LED屏的滚动显示效果
544浏览 • 1回复 待解决
基于原生的跨模块资源访问
261浏览 • 1回复 待解决
基于measure实现的文本测量
148浏览 • 1回复 待解决
基于bindSheet的半模态弹窗
165浏览 • 1回复 待解决
Tabs组件嵌套滑动组件
581浏览 • 1回复 待解决
Scroll与WaterFlow滑动嵌套
407浏览 • 1回复 待解决
是否可以实现滚动锚定的效果
382浏览 • 1回复 待解决
基于mysql的悲观锁的运用场景?
1345浏览 • 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轴的滚动偏移量,传递给最近的、滚动方向一致的父组件。
核心代码