HarmonyOS 实战开发 —— 基于webview的嵌套滚动及与ArkUI组件的联动

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

场景描述

在一些应用的首页或者详情页上，需要原生组件与网页进行一些嵌套或者展开收起的逻辑。

• 场景一：在滑动场景中原生组件与web页面嵌套，需要先让原生组件的高度变化，等原生组件到底后web页面高度随之变化。
• 场景二：嵌套在列表的原生组件中的web页面，点击按钮可以展开或者收起。

方案描述

将web组件放置在List或者Scroll组件中，通过web的嵌套滚动属性nestedScroll和Scroll的onScrollFrameBegin属性实现场景一的场景效果。

封装一个web组件，在web的onpageEnd回调中拿到网页高度，当点击展开后将web的高度设置为拿到的高度即可实现场景二的效果。

场景一：在应用详情页面，上半部分展示简述，下方 web 页面展示详情内容

方案

在父组件Scroll里放置一个原生Image组件和一个web组件，给Image组件设置最大和最小高度。通过在Scroll组件每帧开始滚动时触发的回调onScrollFrameBegin中监听y轴高度，并通过一个变量传递到Image组件中，从而实现Image组件的高度动态变化。下半部分web组件使用控制嵌套滚动的方法nestedScroll和禁止滚动的方法setScrollable来实现一个吸顶的效果。

核心代码

1. 在Scroll组件里设置Image和web组件，并将web组件nestedScroll属性的枚举