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

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

页面布局如下:

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

其中内容区域布局:

@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) 
}
HarmonyOS
2024-09-05 12:35:26
浏览
收藏 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')
分享
微博
QQ
微信
回复
2024-09-05 15:33:33
相关问题
Web组件如何实现高度自适应
718浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
281浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
163浏览 • 1回复 待解决
自适应缩放布局如何实现
160浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2700浏览 • 1回复 待解决
HarmonyOS 自适应组件高度问题
372浏览 • 1回复 待解决
使用List嵌套实现表格布局
652浏览 • 1回复 待解决
使用List组件实现多列布局
190浏览 • 1回复 待解决
嵌套组件Scroll不生效
1794浏览 • 1回复 待解决
Web组件的预加载,如何实现
666浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
559浏览 • 1回复 待解决