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嵌套滚动问题有知道的吗?
2600浏览 • 1回复 待解决
HarmonyOS 嵌套动问题
232浏览 • 1回复 待解决
HarmonyOS TabsWeb嵌套左右滑动问题
246浏览 • 1回复 待解决
基于webView嵌套滚动
479浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
446浏览 • 1回复 待解决
HarmonyOS Tabs组件的Tab栏滚动问题
422浏览 • 1回复 待解决
HarmonyOS 相对布局高度问题
222浏览 • 1回复 待解决
ets中设置布局高度宽度
3041浏览 • 1回复 待解决
页面列表嵌套滚动,实现列表吸顶
1187浏览 • 1回复 待解决
HarmonyOS 悬浮按钮拖动问题
256浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
376浏览 • 1回复 待解决
HarmonyOS Slider滑动问题
268浏览 • 1回复 待解决
HarmonyOS scroll滑动问题
377浏览 • 1回复 待解决
HarmonyOS list滑动问题
712浏览 • 1回复 待解决
如何实现嵌套滚动技术
989浏览 • 1回复 待解决
HarmonyOS Grid组件子项拖动问题
54浏览 • 1回复 待解决
RelativeContainer布局嵌套Stack失效
328浏览 • 1回复 待解决
HarmonyOS Grid自适应高度拖拽问题
359浏览 • 1回复 待解决
HarmonyOS Web组件List的嵌套使用问题
177浏览 • 1回复 待解决
WebList嵌套手势冲突问题
941浏览 • 1回复 待解决
HarmonyOS 如何检测webview滚动是否触底
329浏览 • 1回复 待解决
HarmonyOS 列表高度不相同布局
209浏览 • 1回复 待解决