Ionic Web 应用程序内容下方的粘性页脚

Question

我正在构建一个 Ionic 应用程序，我还计划将其部署为 Web 应用程序。对于网络版本，我想添加一个页脚，将其粘贴在每个页面的内容下方，因此仅当用户滚动到内容底部时才会显示页脚。

为了完成这项工作，我删除了

<ion-content>

和

<ion-footer>

，因为它们不允许我想要的布局。我还必须使用 #scrollingOuterDiv 和 #scrollingDiv 来管理滚动行为，但我对这种方法不满意，如果可能的话，我更喜欢更干净的解决方案。

<ion-app>
  <ion-header>
    <app-header></app-header>
  </ion-header>

  <div #scrollingOuterDiv class="flex flex-col h-screen overflow-auto">
    <div #scrollingDiv class="overflow-auto flex-grow min-h-[88vh] scroll-hide relative">
      @if(globalStateService.isLoading()) {
        <ion-spinner class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50" name="circular"></ion-spinner>
      }
      <router-outlet></router-outlet>
    </div>
    <app-footer class="flex-shrink-0"></app-footer>
  </div>
</ion-app>

依赖关系： 以下是我当前正在使用的依赖项：

"dependencies": {
  "@angular/animations": "^18.0.0",
  "@angular/common": "^18.0.0",
  "@angular/compiler": "^18.0.0",
  "@angular/core": "^18.0.0",
  "@angular/forms": "^18.0.0",
  "@angular/platform-browser": "^18.0.0",
  "@angular/platform-browser-dynamic": "^18.0.0",
  "@angular/router": "^18.0.0",
  "@capacitor/android": "6.1.2",
  "@capacitor/app": "6.0.1",
  "@capacitor/core": "6.1.2",
  "@capacitor/geolocation": "^6.0.1",
  "@capacitor/google-maps": "^6.0.1",
  "@capacitor/haptics": "6.0.1",
  "@capacitor/ios": "6.1.2",
  "@capacitor/keyboard": "6.0.2",
  "@capacitor/preferences": "^6.0.2",
  "@capacitor/status-bar": "6.0.1",
  "@ionic/angular": "^8.0.0",
  "ionicons": "^7.2.1",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.2"
}

Answer 1

您不应该将页脚包裹在

ion-footer

中吗？

<ion-app>
  <ion-header>
    <app-header></app-header>
  </ion-header>

  <div #scrollingOuterDiv class="flex flex-col h-screen overflow-auto">
    <div #scrollingDiv class="overflow-auto flex-grow min-h-[88vh] scroll-hide relative">
      @if(globalStateService.isLoading()) {
        <ion-spinner class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50" name="circular"></ion-spinner>
      }
      <router-outlet></router-outlet>
    </div>
  </div>
  <ion-footer>
    <app-footer class="flex-shrink-0"></app-footer>
  </ion-footer>
</ion-app>