HarmonyOS webview嵌套在布局中间,高度和滚动问题

如图所示,页面顶部有个头,中间是webview,底部还有其他东西,想要一起顺畅的滑动怎么布局?

HarmonyOS webview嵌套在布局中间,高度和滚动问题-鸿蒙开发者社区

HarmonyOS
2024-08-29 09:44:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以参考使用scroll组件嵌套使用,示例代码如下:

import webview from '@kit.ArkWeb'; 
@Entry 
@Component 
struct WebHeightPage { 
  private webviewController: WebviewController = new webview.WebviewController() 
  private scroller: Scroller = new Scroller() 
  @State listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。 
 
  aboutToAppear() { 
    // 配置Web开启调试模式 
    webview.WebviewController.setWebDebuggingAccess(true); 
  } 
 
  build() { 
    Scroll(this.scroller) { 
      Column() { 
        Column() { 
          Text("这里是头部区域") 
          .fontSize(28) 
            .fontColor("#FF0F0F") 
        } 
        .width("100%") 
        .height(100) 
        .backgroundColor("#f89f0f") 
 
        Web({ 
          src: 'https://mbmodule-staticres.paas.cmbchina.com/mb5web/default.html', 
          controller: this.webviewController, 
        }) 
          .width("100%") 
          .height("100%") 
          .onOverScroll((event) => { 
            console.info(`Invoke onOverScroll! xOffset: ${event.xOffset}, yOffset: ${event.yOffset}`); 
            this.scroller.scrollBy(event.xOffset, event.yOffset); 
          }) 
          .layoutMode(WebLayoutMode.NONE) 
          .zoomAccess(false) 
          .domStorageAccess(true) 
          .overviewModeAccess(true) 
          .imageAccess(true) 
          .onlineImageAccess(true) 
          .fileAccess(true) 
          .databaseAccess(true) 
 
        Text("这里是底部区域") 
          .fontSize(28) 
          .fontColor("#FF0F0F") 
          .width("100%") 
          .height(vp2px(100)) 
          .backgroundColor("#f89f0f") 
      } 
      .width("100%") 
    }.width("100%") 
    .height("100%") 
    .scrollBar(BarState.On) 
  } 
}
分享
微博
QQ
微信
回复
2024-08-29 17:17:59
相关问题
Grid嵌套滚动问题有知道的吗?
2667浏览 • 1回复 待解决
HarmonyOS TabsWeb嵌套左右滑动问题
364浏览 • 1回复 待解决
HarmonyOS 嵌套动问题
369浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
33浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
626浏览 • 1回复 待解决
基于webView嵌套滚动
538浏览 • 1回复 待解决
HarmonyOS Tabs组件的Tab栏滚动问题
560浏览 • 1回复 待解决
HarmonyOS 图片放大后的滚动动问题
36浏览 • 1回复 待解决
HarmonyOS 相对布局高度问题
313浏览 • 1回复 待解决
HarmonyOS 嵌套滚动冲突
33浏览 • 1回复 待解决
ets中设置布局高度宽度
3142浏览 • 1回复 待解决
页面列表嵌套滚动,实现列表吸顶
1291浏览 • 1回复 待解决
HarmonyOS动问题
80浏览 • 1回复 待解决