HarmonyOS 鸿蒙Next list包含web滚动问题

HarmonyOS 鸿蒙Next list包含web滚动问题

 .nestedScroll({ scrollForward:NestedScrollMode.SELF_FIRST, scrollBackward:NestedScrollMode.SELF_FIRST, }) 不好用  原因是因为业务需要，我的页面是 list(){ ListItem(){ list(){ ListItem(){ web(){} } } } } 嵌套了两层list，web的滚动就不好使，还有什么方法支持嵌套滚动嘛


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

2 回复

我这里构造了场景，Web是可以滚动的，嵌套的滚轮是可以滚动，鼠标右侧悬浮有滚条显示，内外两层都可以滚动

import web_webview from '@ohos.web.webview';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct NestedScroll2 {
  private arr: number[] = [1, 2, 3, 4, 5]
  private scrollerForList: Scroller = new Scroller()
  private scrollerForList2: Scroller = new Scroller()
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      List({ space: 20, scroller: this.scrollerForList }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            List({ space: 20, scroller: this.scrollerForList2 }) {
              ForEach(this.arr, (item: number) => {
                ListItem() {
                  Web({ src: "www.example.com", controller: this.webviewController })
                    .nestedScroll({
                      scrollForward: NestedScrollMode.SELF_FIRST,
                      scrollBackward: NestedScrollMode.SELF_FIRST,
                    })
                    .width("100%")
                    .height("100%")
                }.width("100%").height(150)
              }, (item: string) => item)
            }
            .width("100%")
            .height("90%")
            .borderWidth(3)
            .edgeEffect(EdgeEffect.Spring)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST,
            })
          }.width("100%").height(800)
        }, (item: string) => item)
      }
      .width("100%")
      .height("100%")
    }
    .width("100%").height("100%").backgroundColor(0xDCDCDC).padding(20)
  }
}

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


针对HarmonyOS鸿蒙Next中list包含web滚动的问题，以下是一些可能的解决方案：

  1. nestedScroll属性设置：在List组件中嵌套Web组件时，应设置nestedScroll属性，并合理配置其滚动行为（如scrollForward和scrollBackward），以实现嵌套滚动。同时，确保Web组件使用了layoutMode（WebLayoutMode.FIT_CONTENT），使Web组件的大小根据页面内容自适应变化。
  2. 宽度设置：Web组件的宽度设置不明确可能导致List组件的高度无法正确计算，进而影响滚动效果。因此，需要为Web组件设置明确的宽度。
  3. JavaScript注入：通过javaScriptOnDocumentStart注入JavaScript，可以确保在页面加载完成后执行特定的JavaScript代码，如动态调整Web组件的尺寸，以适应内容变化。
  4. HTML内容检查：确保加载的HTML内容没有额外的空白区域或未正确关闭的标签，这些都会影响Web组件的高度计算和滚动效果。

如果上述方法均无法解决问题，建议检查HarmonyOS的版本以及API的兼容性，确保所有组件和属性均按照最新的开发文档进行配置。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部