HarmonyOS 组件嵌套问题

scroll组件里面包括web和column，但是真机显示和我预想的不一致，下面是代码：

Scroll(){ 
 Column(){ 
  Web({ src: this.URL, controller: this.controller }).onPageBegin(()=>{ 
  }).onPageEnd(()=>{ 
   console.error("web load finish") 
  }).width('100%').layoutWeight(1) 
 
  Column(){ 
   Text('联系我们').fontColor($r('app.color.color3')) 
    .fontWeight(500).fontSize(18) 
  }.backgroundColor(Color.White).borderRadius(4) 
  .padding(20) 
 }.height('100%') 
}.width('100%')1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

一个页面，上面是web(比较长，不能一屏显示)，下面是自己写的界面，我想要的效果是整体可上下滑动。

但是我写的代码效果，只有上面的web滑动，下面的布局直接显示出来了，没有整体滑动。

HarmonyOS

superinsect

2024-08-29 11:11:04

769浏览

回答 1

按赞同

按时间

zbw_apple

试下以下这种方案：

import webview from '@ohos.web.webview'; 
 
@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: $rawfile('index.html'), 
          controller: this.webviewController, 
        }) 
          .width("100%") 
          .layoutMode(WebLayoutMode.FIT_CONTENT) 
          .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) 
  } 
} 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

2024-08-29 17:13:28

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 组件嵌套问题

订阅鸿蒙技术特刊，精选内容抢先看