Ionic3中如何实现内容滚动时隐藏页眉和页脚

Environment Details #

cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.9.2
System:
Node : v8.1.0
npm : 5.3.0
OS : Linux 4.4

Step 1: Create the Scroll Provider #

Head to your project's src/providers directory, create a new file named scroll.ts, and paste in this code:

import { Injectable } from '@angular/core';
import { Content, Events } from 'ionic-angular';

@Injectable()
export class ScrollProvider {
  private lastScrollTop: number = 0;
  private content: Content;

  constructor(private events: Events) {}

  setContent(content: Content) {
    this.content = content;
    this.content.ionScroll.subscribe((scrollEvent) => {
      const scrollTop = scrollEvent.scrollTop;
      const isScrollingDown = scrollTop > this.lastScrollTop;
      
      // Trigger event to toggle header/footer visibility
      this.events.publish('scroll:toggle-header-footer', !isScrollingDown);
      
      this.lastScrollTop = scrollTop;
    });
  }
}

Don’t forget to register this provider in app.module.ts:

import { ScrollProvider } from '../providers/scroll/scroll';

@NgModule({
  ...
  providers: [
    ...
    ScrollProvider
  ]
})
export class AppModule {}

Step 2: Integrate with Your Page #

In the page where you want this scroll behavior (e.g., home.ts), add the following code to connect the provider and listen for scroll events:

import { Component, ViewChild } from '@angular/core';
import { Content, Events } from 'ionic-angular';
import { ScrollProvider } from '../../providers/scroll/scroll';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;
  showHeaderFooter: boolean = true;

  constructor(private scrollProvider: ScrollProvider, private events: Events) {}

  ionViewDidLoad() {
    this.scrollProvider.setContent(this.content);
    
    // Subscribe to the toggle event
    this.events.subscribe('scroll:toggle-header-footer', (show) => {
      this.showHeaderFooter = show;
    });
  }

  ionViewWillUnload() {
    // Clean up subscription to avoid memory leaks
    this.events.unsubscribe('scroll:toggle-header-footer');
  }
}

Step 3: Add Smooth Animation CSS #

Update your page's SCSS file (e.g., home.scss) to handle the transition and hide state:

page-home {
  ion-header, ion-footer {
    transition: transform 0.3s ease-in-out;
  }

  ion-header.hide {
    transform: translateY(-100%);
  }

  ion-footer.hide {
    transform: translateY(100%);
  }
}

Step 4: Update the Page Template #

Modify your page's HTML (e.g., home.html) to apply the hide class dynamically:

<ion-header [class.hide]="!showHeaderFooter">
  <ion-navbar>
    <ion-title>Scroll Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- Add enough content to enable scrolling -->
  <div *ngFor="let item of Array(50).fill(0)" class="content-item">
    Scrollable Item {{ item + 1 }}
  </div>
</ion-content>

<ion-footer [class.hide]="!showHeaderFooter">
  <ion-toolbar>
    <ion-title>Fixed Footer</ion-title>
  </ion-toolbar>
</ion-footer>

How It Works #

• The ScrollProvider listens to the page's scroll events and tracks whether the user is scrolling up or down.
• It emits an event to tell the page when to show/hide the header and footer.
• The page toggles a CSS class that triggers a smooth transition, sliding the header up and footer down when scrolling down, and bringing them back into view when scrolling up.

内容的提问来源于stack exchange，提问作者S.Yadav