嵌套滚动问题 HarmonyOS 鸿蒙Next

问题:Scroll嵌套Web组件滚动时,保证父组件Scroll先滚动的前提,怎么设置 <后置部分> 在<中间滚动Web内容>滚动到末尾前,不会显示出来?

!!::如果设置<中间滚动Web内容>先滚动的话,怎么保证<前置部分>向上滚出界面???

结构如下:

Scroll(){

//前置部分

Column(){...}

//中间滚动部分
Web({ src: '', controller: this.controller, renderMode: RenderMode.ASYNC_RENDER })
          .onControllerAttached(() => {
            this.controller.loadData(
              this.articleDetail.content,
              'text/html',
              'UTF-8', " ", " ")
          })
          .width('100%')
          .padding({ left: 16, right: 16 })
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.PARENT_FIRST
          })
          .layoutMode(WebLayoutMode.FIT_CONTENT)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

//后置部分

Column(){...}

}

songsunli 1楼•5 个月前

可以参考下这个demo

import web_webview from '@ohos.web.webview';
@Entry
@Component
export struct WebScrollerDemo {
private scrollTouchDown: boolean = false;
private webTouchDown: boolean = false;
private scrolling: boolean = false;
private scroller: Scroller = new Scroller()
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Scroll(this.scroller) {
Column() {
Text(“Scroll Area”)
.width(“100%”)
.height(400)
.backgroundColor(0X330000FF)
.fontSize(16)
.textAlign(TextAlign.Center)
Web({
controller: this.controller,
src: “”,
}).height(“100%”).width(“100%”)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.webTouchDown = true;
} else if (event.type == TouchType.Up) {
this.webTouchDown = false;
}
})
}.width(“100%”)
}
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.scrollTouchDown = true;
} else if (event.type == TouchType.Up) {
this.scrollTouchDown = false;
}
})
.onScrollFrameBegin((offset: number, state: ScrollState) => {
let yOffset: number = this.scroller.currentOffset().yOffset
if (this.scrolling && offset > 0) {
if (yOffset >= 400) { // 400为上面Text组件高度
this.controller.scrollBy(0, offset)
return { offsetRemain: 0 }
} else if (yOffset + offset > 400) {
this.controller.scrollBy(0, yOffset + offset - 400)
return { offsetRemain: 400 - yOffset }
}
}
return { offsetRemain: offset }
})
.onScrollStart(() => {
if (this.scrollTouchDown && !this.webTouchDown) {
this.scrolling = true;
}
})
.onScrollStop(() => {
this.scrolling = false;
})
.edgeEffect(EdgeEffect.Spring)
.backgroundColor(’#DCDCDC’)
.scrollBar(BarState.On)
.width(‘100%’)
.height(‘100%’)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于嵌套滚动问题 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•5 个月前

你这个在iOS原生的解决思路就应该是获取WEB组件内容的实际高度，WEB组件本身是不可以滚动的，只要父组件滚动就可以了

wuwangju 3楼•5 个月前

问题是Web组件不能自适应按高度撑满.

eggper 4楼•5 个月前

嵌套滚动问题在HarmonyOS鸿蒙Next系统中确实是一个需要细致处理的技术点。嵌套滚动通常涉及多个可滚动视图（如ScrollView、NestedScrollView等）的嵌套使用，容易出现滚动冲突或滚动不畅的情况。

针对此类问题，首先要确保每个滚动视图都正确设置了滚动相关的属性。例如，检查是否启用了嵌套滚动支持（如nestedScrollingEnabled属性），并确保父视图和子视图之间的滚动逻辑协调一致。

此外，还需要关注布局文件的编写。确保嵌套结构清晰，避免复杂的嵌套层级，这有助于减少滚动冲突的可能性。同时，检查是否有不必要的margin或padding导致滚动异常。

在编程实现上，可以通过监听滚动事件来动态调整滚动行为。例如，使用OnScrollListener或自定义滚动逻辑来协调不同滚动视图的滚动行为。

如果问题依旧存在，建议检查HarmonyOS鸿蒙Next系统的官方文档和示例代码，确保遵循了系统的最佳实践。同时，关注系统更新和开发者社区的动态，可能有新的解决方案或补丁发布。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html