鸿蒙开发滚动组件嵌套的滚动问题

ShuiShenHuoLe

212人浏览 · 2025-09-25 22:43:58

ShuiShenHuoLe · 2025-09-25 22:43:58 发布

Scroll 嵌套外层滚动容器滚动，如何设置 nestedScroll，实现 Scroll 组件先滚动，滚动边缘后触发外层滚动容器滚动

可以在嵌套的子容器里面设置 nestedScroll 属性设置前后两个方向的嵌套滚动模式，实现与父组件的滚动联动

嵌套滚动选项

选项	描述
scrollForward	前向嵌套滚动模式
scrollBackward	后向嵌套滚动模式

默认值：{
    scrollForward: NestedScrollMode.SELF_ONLY,
    scrollBackward: NestedScrollMode.SELF_ONLY
 }

.nestedScroll({
    scrollForward: NestedScrollMode.PARENT_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
})

注意

Scroll 设置 enablePaging 或者 scrollSnap，并同时设置父组件优先的嵌套滚动时，嵌套滚动不生效。
组件无法通过鼠标按下拖动操作进行滚动。

nestedScroll 的属性为 NestedScrollMode，可选值为：

名称	描述
SELF_ONLY	只自身滚动，不与父组件联动
SELF_FIRST	自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。
PARENT_FIRST	父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。
PARALLEL	自身和父组件同时滚动，自身和父组件都到达边缘以后，如果自身有边缘效果，则自身触发边缘效果，否则父组件触发边缘效果.