目录

Web组件内容过长时，底部的内容无法滑动联动如何解决

问题现象

当Web组件内容过长时，出现了布局问题，底部固定栏文字超出屏幕范围并被截断，该如何解决？

问题效果预览：

示例代码：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebScroll {
  controller: webview.WebviewController = new webview.WebviewController();
  private scrollerForScroll: Scroller = new Scroller();

  build() {
    Column() {
      Text('标题');
      Scroll(this.scrollerForScroll) {
        Column() {
          Text('下面是Web组件');
          Web({ src: 'https://developer.huawei.com/consumer/', controller: this.controller })
            .height('100%');
          Text('文字1');
          Text('文字2');
          Text('文字3');
        };
      }
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical);

      Text('底部固定栏');
    };
  }
}

效果预览

背景知识

问题定位

针对布局问题，首先分析组件的层级结构：

当未指定高度时，Column、Scroll组件的默认高度、宽度均是100%。

分析结论

Scroll组件和标题文字已经占据了全部屏幕内容控件，导致底部固定栏文字的位置超过了屏幕内容区域范围，扩展到屏幕底部安全区域。

修改建议

layoutWeight属性可以实现高度自适应效果，如果父容器尺寸确定时，设置了layoutWeight属性且layoutWeight属性生效值大于0的子元素会从主轴剩余空间中按照各自所设置的权重占比分配尺寸，忽略元素本身尺寸设置，自适应占满剩余空间。将Scroll组件设置layoutWeight(1)即可自适应高度解决此问题。

示例代码：
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebScroll {
  controller: WebviewController = new webview.WebviewController();
  private scrollerForScroll: Scroller = new Scroller();

  build() {
    Column() {
      Text('标题');
      Scroll(this.scrollerForScroll) {
        Column() {
          Text('下面是Web组件');
          Web({ src: 'www.example.com', controller: this.controller })
            .nestedScroll({ scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST })
            .height('100%')
            .fileAccess(false)
            .geolocationAccess(false);
          Text('文字1');
          Text('文字2');
          Text('文字3');
        };
      }
      .scrollBar(BarState.Off)
      .layoutWeight(1)
      .scrollable(ScrollDirection.Vertical);

      Text('底部固定栏');
    };
  }
}