HarmonyOS 鸿蒙Next:原生页面部分内容使用webview展示时,外层嵌套scroll,内层包含一个webview,如何让webview高度与H5页面高度一致,保证用户仅滑动外层scroll

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

HarmonyOS 鸿蒙Next:原生页面部分内容使用webview展示时,外层嵌套scroll,内层包含一个webview,如何让webview高度与H5页面高度一致,保证用户仅滑动外层scroll

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

2 回复

List组件中加载Web组件:

import { webview } from '@kit.ArkWeb';
[@Entry](/user/Entry)
[@Component](/user/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](/user/Builder) titleBuilder() {
    Column() {
      Text('标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题')
        .fontSize(22)
        .fontColor('#333333')
        .fontWeight(FontWeight.Bold)
        .width('100%')
      Row({ space: 12 }) {
        Text('证券时报网 李捷')
          .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](/user/Builder) webBuilder() {
    Web({
      src: '',
      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)
  }
} 

更多关于HarmonyOS 鸿蒙Next:原生页面部分内容使用webview展示时,外层嵌套scroll,内层包含一个webview,如何让webview高度与H5页面高度一致,保证用户仅滑动外层scroll的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,当原生页面部分内容使用webview展示,并且外层嵌套scroll,内层包含一个webview时,可以通过以下方式实现webview高度与H5页面高度一致,确保用户仅滑动外层scroll:

  1. 监听H5页面高度变化:通过webview提供的接口监听H5页面的高度变化,动态调整webview的高度。HarmonyOS的webview组件通常提供有类似于onPageFinishedonReceivedClientCertRequest等回调方法,可以在这些方法中获取H5页面的最终渲染高度。

  2. 设置webview高度:在获取到H5页面的高度后,使用布局参数或样式设置webview的高度,使其与H5页面高度一致。

  3. 禁用webview内部滚动:确保webview的滚动被禁用,使其不会干扰外层的scroll组件。这通常可以通过设置webview的某些属性或CSS样式来实现,例如overflow: hidden

  4. 外层scroll适配:外层scroll组件需要设置适当的布局参数,以确保其能够包含并滚动内部的webview及其他内容。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部