HarmonyOS 原生页面部分内容使用webview展示内,外层嵌套scroll内层包含一个webview,如何让webview的高度与H5页面高度一致,以保证用户仅需要滑动外层scroll即可

HarmonyOS
2025-01-09 16:18:11
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

在滚动视图中嵌套Web组件,并且达到Web的高度与H5页面高度一致的效果,可以参考示例如下,List组件中加载Web组件:

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      List() {
        ListItem() {
          this.titleBuilder()
        }

        ListItem() {
          this.webBuilder()
        }
      }
      .height('100%')
      .width('100%')
      .hitTestBehavior(HitTestMode.Block)
    }
  }

  @Builder
  titleBuilder() {
    Column() {
      Text('标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题')
        .fontSize(22)
        .fontColor('#333333')
        .fontWeight(FontWeight.Bold)
        .width('100%')
      Row({ space: 12 }) {
        Text('xxx')
          .fontSize(14)
          .fontColor('#999999')
        Text('2024-06-26 10:00')
          .fontSize(14)
          .fontColor('#999999')
      }
      .width('100%')
      .margin({ top: 12 })
    }
    .padding({ left: 20, top: 20, right: 20 })
  }

  @Builder
  webBuilder() {
    Web({
      src: 'xxx',
      controller: this.controller,
      renderMode: RenderMode.SYNC_RENDER
    })
      .domStorageAccess(true)
      .height('100%')
      .margin({
        left: 17,
        right: 17,
        top: 25,
        bottom: 20
      })
      .nestedScroll({
        scrollForward: NestedScrollMode.SELF_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
      .width('calc(100% - 40vp)')
      .verticalScrollBarAccess(false)
      .overScrollMode(OverScrollMode.NEVER)
      .layoutMode(WebLayoutMode.FIT_CONTENT)
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:49:52
相关问题
HarmonyOS webview H5页面事件监听
522浏览 • 1回复 待解决
HarmonyOS 通过webview改变H5页面字体
408浏览 • 1回复 待解决
HarmonyOS 原生webviewH5消息通信
367浏览 • 1回复 待解决