HarmonyOS 鸿蒙Next Scroll嵌套web

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Scroll嵌套web 使用Scroll或者List嵌套web的时候，希望web里面的内容完全显示出来，并且web本身不需要自身的滑动，应该怎么实现？尝试过hitTestBehavior的几种无法实现，然后也试了写死一个固定高度但里面的内容却无法显示完全了

demo：

import webview from '@ohos.web.webview'

@Entry
@ComponentV2
struct Index {

  controller: WebviewController = new WebviewController();
  @Local webViewHeight: number | string = "auto"
  @Local webEnable: boolean = true
  private scrollerForScroll: Scroller = new Scroller();

  aboutToAppear() {

  }

  title = 'title';
  review = 'review';
  context = 'context';
  list = [0, 0, 0, 0];

  build() {
    Column() {
      Column() {
        Scroll(this.scrollerForScroll) {
          Column() {
            Text(this.title).fontSize(40).padding(40)
            List() {
              ForEach(this.list, () => {
                ListItem() {
                  Text(this.context).fontSize(16)
                }
              })
            }
            Web({ src: "www.baidu.com", controller: this.controller })
              .height(4013)
              .width("100%")
              .layoutMode(WebLayoutMode.FIT_CONTENT)
            Text("测试").fontSize(30).height(800).backgroundColor(Color.Orange)
          }

        }
      }
    }
  }
}

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

Harmonyos Next教程
2 回复

可以设置Web组件的渲染方式为 RenderMode.SYNC_RENDER：枚举说明

import webview from '@ohos.web.webview'

@Entry
@ComponentV2
struct Index {

  controller: webview.WebviewController = new webview.WebviewController();
  @Local webViewHeight: number | string = "auto"
  @Local webEnable: boolean = true
  private scrollerForScroll: Scroller = new Scroller();

  aboutToAppear() {

  }

  title = 'title';
  review = 'review';
  context = 'context';
  list = [0, 0, 0, 0];

  build() {
    Column() {
      Column() {
        Scroll(this.scrollerForScroll) {
          Column() {
            Text(this.title).fontSize(40).padding(40)
            List() {
              ForEach(this.list, () => {
                ListItem() {
                  Text(this.context).fontSize(16)
                }
              })
            }
            Web({ src: "www.baidu.com", controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
              .height(4013)
              .width("100%")
              .layoutMode(WebLayoutMode.FIT_CONTENT)
            Text("测试").fontSize(30).height(800).backgroundColor(Color.Orange)
          }
        }
      }
    }
  }
}

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


针对帖子标题“HarmonyOS 鸿蒙Next Scroll嵌套web”的问题，这里提供直接相关的回答：

在HarmonyOS（鸿蒙）系统中实现Next Scroll嵌套Web视图的功能，主要涉及到鸿蒙的UI框架和WebView组件的使用。Next Scroll是鸿蒙提供的一种滚动视图容器，允许在垂直或水平方向上滚动其内容。而WebView组件则用于在应用中嵌入和显示网页内容。

要实现Next Scroll嵌套Web视图，你首先需要创建一个Next Scroll容器，并在其中添加一个WebView组件。确保WebView组件正确初始化，并设置要加载的网页URL。此外，还需要处理WebView的加载事件、错误处理等，以确保用户能够顺利浏览网页内容。

在实现过程中，可能需要注意以下几点：

  1. 确保WebView组件的版本与鸿蒙系统版本兼容。
  2. 合理设置Next Scroll和WebView的布局参数，以实现良好的用户体验。
  3. 处理WebView加载网页时的内存和资源管理，避免内存泄漏或应用崩溃。

如果在实现过程中遇到具体问题，如WebView无法加载网页、Next Scroll滚动异常等，建议检查相关组件的配置和代码实现。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部