Ionic 3实现滚动向下隐藏navbar与tabs、向上滚动显示功能求助

Hey there! I’ve built this exact scroll behavior for several Ionic apps—let me walk you through a reliable implementation that works smoothly with both navbar and tabs:

First, update your page’s HTML to add references to the header (navbar) and tab bar, plus attach a scroll listener to the content area:

<ion-header #pageHeader>
  <ion-toolbar>
    <ion-title>Scroll Demo</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content (ionScroll)="handleScroll($event)" class="ion-padding">
  <!-- Your page content goes here -->
  <p *ngFor="let item of Array(50).fill(0)">Scroll down to hide navbar & tabs...</p>
</ion-content>

<ion-tabs>
  <ion-tab-bar #pageTabBar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Next, add the TypeScript code to track scroll direction and toggle visibility. We’ll use ViewChild to grab references to the header and tab bar, then adjust their position based on scroll movement:

import { Component, ViewChild } from '@angular/core';
import { IonHeader, IonTabBar, IonContent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('pageHeader') pageHeader!: IonHeader;
  @ViewChild('pageTabBar') pageTabBar!: IonTabBar;
  @ViewChild(IonContent) content!: IonContent;

  lastScrollPosition = 0;
  isBarHidden = false;

  async handleScroll(event: Event) {
    const currentScrollPos = await this.content.getScrollTop();
    const scrollDifference = currentScrollPos - this.lastScrollPosition;

    // Skip small scrolls to avoid jitter
    if (Math.abs(scrollDifference) > 10) {
      if (scrollDifference > 0 && !this.isBarHidden) {
        // Scrolling DOWN: hide header and tab bar
        this.pageHeader.el.style.transform = 'translateY(-100%)';
        this.pageTabBar.el.style.transform = 'translateY(100%)';
        this.isBarHidden = true;
      } else if (scrollDifference < 0 && this.isBarHidden) {
        // Scrolling UP: show header and tab bar
        this.pageHeader.el.style.transform = 'translateY(0)';
        this.pageTabBar.el.style.transform = 'translateY(0)';
        this.isBarHidden = false;
      }
    }

    // Update last scroll position for next check
    this.lastScrollPosition = currentScrollPos;
  }
}

To make the hide/show action feel polished, add a CSS transition to the header and tab bar. Open your page’s SCSS file and add:

ion-header, ion-tab-bar {
  transition: transform 0.3s ease-out;
}

• Reduce jitter: The Math.abs(scrollDifference) > 10 check ignores tiny scroll movements, which prevents the bars from flickering during slow scrolling.
• Handle scroll-to-top: If you want to force the bars to show when the user scrolls all the way to the top, add a check for currentScrollPos === 0 and set isBarHidden to false if so.
• React/Vue adaptation: For React, use useRef to grab elements and the onIonScroll event. For Vue, use ref and @ionScroll—the core logic (tracking scroll direction and adjusting transforms) stays the same.

内容的提问来源于stack exchange，提问作者Shreyas Pednekar