Question

如果页面上出现滚动并且页面向下滚动，则当您调用该函数以显示加载程序时，它将仅覆盖页面的顶部。即使页面滚动到站点页脚，如何使加载程序覆盖整个页面？

任何页面：

<app-loader [loader]="loading"></app-loader>
...

loader.component.html：

<div class="load-container" *ngIf="loader">
  <div class="load-speeding-wheel"></div>
</div>

loader.component.ts：

@Input() loader: boolean = false;

layout.component.html：

<div class="container">
  <app-toolbar (sideNavToggled)="snav.toggle()"></app-toolbar>
  <mat-sidenav-container class="sidenav-container" [style.marginTop.px]="toolBarHeight">
    <mat-sidenav #snav class="sidenav" [(mode)]="sideNavMode" [(opened)]="sideNavOpened">
      <app-sidenav></app-sidenav>
    </mat-sidenav>
    <mat-sidenav-content> 
      <main class="main-container">
        <router-outlet></router-outlet>
      </main>
      <app-footer></app-footer>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

loader.css：

.load-container {
    width           : 100%;
    height          : 100%;
    text-align      : center;
    position        : absolute;
    left            : 0;
    top             : 0;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    background-color: rgba(0, 0, 0, 0.3);
    z-index         : 10;
}

Answer 1

另一种方式可以使用：

flutter build apk --release

Answer 2

您是否已经尝试将宽容器的宽度：100vw和高度：100vh（而不是100％）？

加载程序无法覆盖整个页面

2 个答案: