HarmonyOS Web组件嵌套在Scroll布局中或List布局中,如何实现Web组件高度根据内容自适应

Web组件嵌套在Scroll布局中或List布局中,如何实现Web组件(加载html代码)高度根据内容自适应,只有父组件滚动,Web自身不滚动。

页面布局如下:

Column(){ 
  this.TopBar()//标题栏 
  this.Content()//内容区域,包含资讯标题、发布时间、资讯内容(Web)layoutWeight=1 
  this.BottomBar()//底部菜单操作按钮区域 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

其中内容区域布局:

@Builder 
Content(){ 
  Scroll(this.scrollerForScroll){ 
    Column(){ 
      Text('资讯标题') 
        .fontColor(Color.Black) 
        .fontSize('22fp') 
        .fontWeight(600) 
        .width('100%') 
      Text(`人民日报 2024-04-30`) 
        .fontColor(Color.Black) 
        .fontSize('14fp') 
        .fontWeight(400) 
        .width('100%') 
        .margin({top:'10vp'}) 
      Web({ src:'www',controller:this.webController }) //高度需要根据内容自适应 
        .nestedScroll({ 
          scrollForward:NestedScrollMode.SELF_FIRST, 
          scrollBackward:NestedScrollMode.SELF_FIRST 
        }) 
        .layoutWeight(1) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .fileAccess(true) 
        .defaultFontSize(this.webviewFontSize) 
    } 
  } 
  .width('100%') 
  .layoutWeight(1) 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
HarmonyOS
2024-09-05 12:35:26
1337浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

在web和scroll上同时加上 .nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST })

核心代码如下:

TabContent() { 
  Scroll() { 
    Web({ 
      src: $rawfile('test.html'), 
      controller: this.subController 
    }).nestedScroll({ 
      scrollForward: NestedScrollMode.PARENT_FIRST, 
      scrollBackward: NestedScrollMode.SELF_FIRST 
    }) 
  }.height('100%') 
  .nestedScroll({ 
    scrollForward: NestedScrollMode.PARENT_FIRST, 
    scrollBackward: NestedScrollMode.SELF_FIRST 
  }) 
}.tabBar('公告1')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
分享
微博
QQ
微信
回复
2024-09-05 15:33:33


相关问题
List水平布局如何根据内容自适应高度
1523浏览 • 1回复 待解决
Web组件如何实现高度自适应
1731浏览 • 1回复 待解决
HarmonyOS List高度根据内容自适应
1010浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
1796浏览 • 1回复 待解决
HarmonyOS web组件怎么自适应高度
742浏览 • 1回复 待解决
HarmonyOS web高度自适应内容高度
1160浏览 • 1回复 待解决
HarmonyOS 如何实现自适应web高度
622浏览 • 1回复 待解决
HarmonyOS Grid高度根据内容自适应
832浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
1592浏览 • 1回复 待解决
HarmonyOS List嵌套list布局
859浏览 • 1回复 待解决
自适应缩放布局如何实现
1300浏览 • 1回复 待解决