HarmonyOS鸿蒙Next中当用ForEach显示web组件时，设置过高的高度（大于2300）会导致web显示空白

HarmonyOS鸿蒙Next中当用ForEach显示web组件时，设置过高的高度（大于2300）会导致web显示空白 当用ForEach显示web组件的时候，当给web组件设置过高的高度时候(大于2300的时候)，web会显示空白。

3 回复

Web基于页面大小的自适应网页布局，高度自适应需设置web组件属性.layoutMode(WebLayoutMode.FIT_CONTENT)

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

在外层的scroll组件上添加属性hitTestBehavior(HitTestMode.Block)，屏蔽内层Web组件的触摸控制来实现scroll滑动。您看看是否满足您的要求。 hitTestBehavior属性参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-attributes-hit-test-behavior-V13

需要设置renderMode和layoutmode全量展开属性.

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#layoutmode11

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#rendermode12枚举说明

Web({
src: '',
controller: this.controller,
renderMode: RenderMode.SYNC_RENDER
})
.width('100%')// .height(this.webContainHeight)
.height(3000)
.layoutWeight(1)
.zoomAccess(false)
.imageAccess(true)
.onlineImageAccess(true)
.verticalScrollBarAccess(false)
.layoutMode(WebLayoutMode.FIT_CONTENT)

看看这个可以嘛，这边可以加载的

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  
  // HTML 头部
  head = `
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
      <style>img { max-width: 100%; width: auto; height: auto; }</style>
    </head>
  `;
  
  @State totalContent: string = '';
  @State contentList: string[] = [];
  @State webContent: string = `
    <p><span><span>整整五十年前，罗杰·卡恩在《夏日男孩》一书中对职业棒球运动员的生命做了如此的定义，与常人不同，在三十岁至四十岁之间，他们都要面对第一次死亡，即便他还生龙活虎，即便他还反应机敏，但因为将永远失去职业球员身份，在35岁时便能悟道行至人生终点的极致体验。后人取其要义，浓缩为——职业运动员都是要死两次的。</span></span></p>
    <p>只要用心关切运动员退役后的人生，这句格言便时常会被引用，各种滋味聚在其间。如果你迫不及待地看了纪录片《费德勒：最后的12天》，一定会真切地听到常年担任费德勒教练的赛维林·卢迪静静地说出这句格言的。强大如费德勒，不凡如费德勒，也会在41岁褪去球员身份这一刻，直面终点与死亡。这是一部样态素朴，但情感和泪水浓度超高的作品，据说知名导演阿斯弗·卡帕迪尔之所以愿意以联合导演身份呈现这独特的12天，就是想深入开掘这句存世五十年格言丰富的蕴含，此前《马拉多纳》和《塞纳》两部作品足以让其可以纵横天下。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047346947_165.png" width="100%" height="auto"/></p>
    <p>有一种说法，随着职业球员生涯行将结束，费德勒希望可以给自己和家人做些必要的影像记录，小时候父母对儿子网球训练的点滴记录日后自然成为了描摹巨星肖像时最珍贵的图景之一。刚一动手拍摄，内容实在生动，各方随即意识到这可是一个非常理想的纪录片题材，不该仅是停留在家庭录影的层级，因此快速决定与Amazon Prime Video展开合作，也才有了我们如今看到的这部87分钟的纪录片。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047352270_334.png" width="100%" height="auto"/></p>
    <p>最先深入此片创作的导演名叫乔·萨比亚，并非先天网球迷，直到2019年为Vogue杂志拍摄系列短片《73个问题》费德勒篇章时才通过与天王对话投入到了网球世界中。作为年轻导演，萨尼亚居然是通过《最后的12天》才开启了第一部长片创作，因此邀请名导阿斯弗·卡帕迪尔入局也是为了把握一下影片的调性，他的作品曾接连赢下奥斯卡奖和英国电影协会奖，尤其善于挖掘和塑造人物。当年在那不勒斯深挖球王马拉多纳在这座城中旧事时，阿斯弗·卡帕迪尔总要向当地人解释，为何自己不是那不勒斯人、不是意大利人、不是阿根廷人，却要执着地来拍球王故事。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047354081_36.png" width="100%" height="auto"/></p>
    <p>如果职业网球世界可以被比喻为一个现实的王国，在无尽的疆域上飘扬着统一的旗帜，有着源远流长的文化传承，那费德勒一定会是一任国王，头戴发带的标志形象自然会被印在王国纸币上。回到现实世界，过往二十年间，体育世界里最具有君主气质的非费德勒莫属，威仪四方。</p>
    <p>2022年9月，在自家巴塞尔办公室里，以职业生涯103个冠军荣耀为背景录制退役公告时，那架势好似总统的炉边讲话。</p>
    <p>2020年至2022年间，费德勒先后做了三次膝部手术，11次大满贯赛事，他仅仅三度现身。此间，纳达尔和德约皆超越了国王20座大满贯冠军的功业，而更让费德勒饱受痛楚的还是2021年温网的那场败局，最后一刻的0-6折磨着所有人，国王已几乎不能再战。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047355616_121.png" width="100%" height="auto"/></p>
    <p>职业球员放下球拍，终结一段人生，到底需要多大的勇气呢？很多人不断地在给出答案。小威小心翼翼地选择美网首轮胜场之后告知众人，她还需要胜利的感觉，但拒绝在转身而去时使用“退役”的说法，未来的可能性诱惑力巨大。</p>
    <p>国王的右膝没有继续成全作为王者的雄心，再爱网球，再不愿失去球场上的独特岁月，费德勒总会感知到以膝部不适为信号的命运抉择，“费德勒时刻”可以不再延续，迟早会新的国王继续让网球对世人具有宗教般的体验。</p>
    <p>《最后的12天》稳健地将一段人生的最后时刻呈现出来，用导演的话来讲，这是一部大人物的小制作。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047357918_771.png" width="100%" height="auto"/></p>
    <p>在伦敦的告别时刻，有两台摄像机不离费德勒左右，四大天王之间的细腻互动被呈现得活灵活现，德约指出费德勒酒会衬衫着装有微小不当这样的小桥段让观者特别受用。</p>
    <p>看过片子的人都知道，费德勒非常爽快地接受了德约的意见，在酒店大堂当众换上了与晚宴穿着调性相吻合的白色衬衣。</p>
    <p>导演阿斯弗·卡帕迪尔说起这个场景有他自己的理解，与我们这些常人所思不同，“这些巨星之间仍然存在着一种奇特的竞争，都不想被作为对手的好友看错，又都有一种孩子气，就像学校操场上的孩子一样，尽管他们都已经是拥有了私人飞机的人。”</p>
    <p>这话肯定需要仔细品味一下，也许导演诠释过度了，不就是一次小小的纠错嘛，难道这还是一种与生俱来的好胜之心的自然呈现？也许吧。</p>
    <p>客观地讲，费德勒几近完美的形象无人可及，也只有他能将最强劲的对手变成一生挚友，与纳达尔联手出战拉沃尔杯的最后一场比赛便是网球史上事关友谊的最美篇章之一。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047360183_851.png" width="100%" height="auto"/></p>
    <p>《最后的12天》里特意刻画了费德勒与德约和纳达尔之间长达近二十年的情谊与竞争，2005年至2009年，费纳分享着职业网球最领先排名，但随着德约的横空出世，一种崭新的竞争格局随即出现。</p>
    <p>年逾不惑，费德勒回想当年与德约的竞争岁月里，自己并没有给予对手应得的尊重，因为此前他一直认为德约的技术存在明显的不均衡，正手超强，但反手不稳定。</p>
    <p>可是塞尔维亚人异常强大，正反手击球最终皆达成完美境界，其大满贯冠军数量自然也是独步天下。</p>
    <p>费纳之间的友谊最是深厚，用德约的话讲，只有米尔卡和拉法能够打动费德勒。</p>
    <p>最后一战，纳达尔哭成泪人，他的痛感之一在于再也无法经历与费德勒对战时特有的氛围与压力，非凡的人生篇章有了终结。</p>
    <p><img src="http://pic.5club.cctv.cn/photoAlbum/page/performance/img/2024/6/22/1719047362255_985.png" width="100%" height="auto"/></p>
    <p>决战于巅峰的天王们彼此相惜，其氛围令人陶醉。纪录片自然也包含丰沛的戏剧性，经历12天迎来的最后一战是情感高潮。</p>
    <p>费德勒汇聚天下英豪，显现其君主风采，真正对其命运时刻有共鸣的那几个人恰是当下对手。</p>
    <p>泪奔的纳达尔，凝重的德约与穆雷内心中不仅是惜别伟大对手，也该有一份谢意的，是费德勒让他们遇见了自己即将的未来，终结一段人生，面临一次死亡。</p>
    <p>结束职业生涯最后一次健身房训练后，费德勒留下一句话——接下来会怎样呢（What next?）是啊！所有人都希望拥有这个答案，在第一次死亡过后，第二次死亡来临之前，会怎么样呢？
  `;
  
  private controllerList: web_webview.WebviewController[] = [];
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  // 最大高度限制
  private maxWebHeight: number = 2300;

  aboutToAppear(): void {
    this.totalContent = `<html>${this.head}<body>${this.webContent}</body></html>`;
    
    // 初始化 WebView 控制器
    for (let i = 0; i < 2; i++) {
      let webviewController: web_webview.WebviewController = new web_webview.WebviewController();
      this.controllerList.push(webviewController);
      this.contentList.push(this.totalContent);
    }

    // 延迟加载内容
    setTimeout(() => {
      for (let i = 0; i < this.contentList.length; i++) {
        this.controllerList[i].loadData(this.totalContent, "text/html", "UTF-8", "", "");
      }
    }, 1000);
  }

  build() {
    if (this.contentList.length > 0) {
      Scroll() {
        Column() {
          ForEach(this.contentList, (item: string, index: number) => {
            Web({
              src: "",
              controller: this.controllerList[index],
              renderMode: RenderMode.SYNC_RENDER,
            })
              .layoutWeight(1)
              .layoutMode(WebLayoutMode.FIT_CONTENT)
              .fileAccess(true) // 加载本地 HTML 时需要
              .domStorageAccess(true) // 开启 DOM Storage API 权限
              .multiWindowAccess(true) // 允许网页在新窗口打开
              .allowWindowOpenMethod(true) // 允许 JavaScript 打开新窗口
              .javaScriptAccess(true)
              .zoomAccess(false)
              .nestedScroll({
                scrollForward: NestedScrollMode.SELF_FIRST,
                scrollBackward: NestedScrollMode.SELF_FIRST
              })
              .verticalScrollBarAccess(false)
              .mixedMode(MixedMode.All) // 允许加载 HTTP 和 HTTPS 混合内容
              .overScrollMode(OverScrollMode.NEVER)
              .width("100%");
          });
        }
        .width('100%');
      }
      .height("100%");
    }
  }
}

更多关于HarmonyOS鸿蒙Next中当用ForEach显示web组件时，设置过高的高度（大于2300）会导致web显示空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用ForEach循环渲染Web组件时，如果设置的高度超过2300px，可能会导致Web组件显示空白。这是因为鸿蒙系统对Web组件的渲染高度有一定的限制，超过这个限制后，系统无法正确渲染Web内容，从而导致空白显示。这个问题可能与系统的内存管理机制或渲染引擎的优化策略有关，具体原因需要进一步分析系统源码或官方文档。建议在实际开发中避免设置过高的Web组件高度，以确保内容能够正常显示。

在HarmonyOS鸿蒙Next中，使用ForEach循环渲染Web组件时，如果设置的高度超过2300像素，可能会导致Web组件无法正常显示，出现空白现象。这可能是由于系统对单个组件渲染高度的限制或内存管理机制导致的。建议将高度控制在合理范围内，或通过分页、懒加载等方式优化渲染性能，以确保Web组件正常显示。

回到顶部