如何在ionic 4中检测滚动方向

Question

我想在滚动时隐藏和显示我的标签栏。想要在用户向下滚动时隐藏它并在向上滚动时显示它。onScroll方法中如何判断方向？

下面是我的 onScroll 函数：

onScroll($event: CustomEvent<ScrollDetail>) {
    if ($event && $event.detail && $event.detail.scrollTop) {
        let scrollTop = $event.detail.scrollTop;
        console.log($event, scrollTop);
        document.querySelector('ion-tab-bar').style.display = 'none';
    }
}

Answer 1

我认为您只需要在 ion-content 元素上启用滚动事件（Ionic 4 需要它）并将 ionScroll 事件绑定到您的方法+将您的选项卡可见性绑定到一个变量（我在此示例中使用了页脚）：

<ion-content padding [scrollEvents]="true" (ionScroll)="onScroll($event)">
  <ion-list>
    <ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]">
      I am item # {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer [hidden]="footerHidden">
  <ion-toolbar>Hi, I am footer, I hide on scroll down, I am revealed on scroll up</ion-toolbar>
</ion-footer>

现在你的 ts 文件可以是这样的：

  ///
  footerHidden: boolean;

  constructor(
  ) {}

  onScroll(event) {
    // used a couple of "guards" to prevent unnecessary assignments if scrolling in a direction and the var is set already:
    if (event.detail.deltaY > 0 && this.footerHidden) return;
    if (event.detail.deltaY < 0 && !this.footerHidden) return;
    if (event.detail.deltaY > 0) {
      console.log("scrolling down, hiding footer...");
      this.footerHidden = true;
    } else {
      console.log("scrolling up, revealing footer...");
      this.footerHidden = false;
    };
  };
  ///

在此处查看演示：

https://stackblitz.com/edit/ionic-v4-euwnrg

标签更新：

使用 ionic 创建新标签应用程序（ionic start myTabsApp，然后选择标签启动器）

然后创建共享服务（ionic g，然后生成服务），以便您的标签隐藏标志布尔值可根据需要在多个页面上使用：

import { Injectable } from '@angular/core';

@Injectable({   providedIn: 'root' }) export class FoundationService {

  public hiddenTabs: boolean;

  constructor() { } 
}

然后将基础服务导入您的 tab1 并更改您的模板：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding [scrollEvents]="true" (ionScroll)="onScroll($event)">
    <ion-list>
      <ion-item *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]">
        I am item # {{ item }}
      </ion-item>
    </ion-list>
</ion-content>

然后更新你的 tab1 ts：

import { Component } from '@angular/core'; import { FoundationService } from '../services/foundation.service';

@Component({   selector: 'app-tab1',   templateUrl: 'tab1.page.html',   styleUrls: ['tab1.page.scss'] }) export class Tab1Page {

  constructor(private foundation: FoundationService) {}

  onScroll(event) {
    // used a couple of "guards" to prevent unnecessary assignments if scrolling in a direction and the var is set already:
    if (event.detail.deltaY > 0 && this.foundation.hiddenTabs) return;
    if (event.detail.deltaY < 0 && !this.foundation.hiddenTabs) return;
    if (event.detail.deltaY > 0) {
      console.log("scrolling down, hiding footer...");
      this.foundation.hiddenTabs = true;
    } else {
      console.log("scrolling up, revealing footer...");
      this.foundation.hiddenTabs = false;
    };   };

}

现在更新 tabs.ts 以导入基础服务：

import { Component } from '@angular/core';
import { FoundationService } from '../services/foundation.service';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  constructor(private foundation: FoundationService) {

  }

}

并更新标签页的模板以绑定布尔值：

<ion-tabs>

  <ion-tab-bar slot="bottom" [hidden]="foundation.hiddenTabs">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

然后运行 ​​ionic serve 并尝试一下。我写的方法相当原始和天真，所以你想要更新/调整滚动事件中的哪些变化应该要求布尔值为假/真的逻辑；