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嵌套滚动问题有知道的吗?
2320浏览 • 1回复 待解决
基于webView嵌套滚动
261浏览 • 1回复 待解决
HarmonyOS list滑动问题
281浏览 • 1回复 待解决
ets中设置布局高度宽度
2741浏览 • 1回复 待解决
页面列表嵌套滚动,实现列表吸顶
818浏览 • 1回复 待解决
如何实现嵌套滚动技术
727浏览 • 1回复 待解决
RelativeContainer布局嵌套Stack失效
154浏览 • 1回复 待解决
嵌套ForEach不能自动适应高度
458浏览 • 1回复 待解决
harmonyos-webview-布局增加load不显示
6331浏览 • 3回复 待解决
HarmonyOS UI布局问题
103浏览 • 1回复 待解决
栅格布局怎么实现滚动效果?
169浏览 • 0回复 待解决
WebList嵌套手势冲突问题
633浏览 • 1回复 待解决
HarmonyOS Scroll 嵌套 RelativeContainer 问题
134浏览 • 1回复 待解决
HarmonyOS 组件嵌套问题
127浏览 • 1回复 待解决