如何检测离子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 启动 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 发球并尝试一下。我写的方法相当原始和天真，所以你想更新/调整滚动事件中的哪些变化的逻辑应该要求布尔值是假/真；

Answer 2

使用 deltaY 确实有问题，这里的方法略有不同，但更可靠。

定义变量并存储 lastScrollTop 值，然后将 currentScrollTop 与 lastScrollTop

进行比较

在这种情况下 currentScrollTop = event.detail.scrollTop

HTML

<ion-content [scrollEvents]="true" (ionScroll)="handleScroll($event)">
  <!-- Your Structure here -->
</ion-content>

Javascript (v1)

public lastScrollTop = 0;
public isHidden = false;

public handleScroll(event): void {
    this.isHidden = this.lastScrollTop < event.detail.scrollTop;
    this.lastScrollTop = event.detail.scrollTop;
}

Javascript (v2)

public lastScrollTop = 0;


public handleScroll(event): void {

    if(this.lastScrollTop < event.detail.scrollTop) {
        console.log("scrolling down")
    } else {
        console.log("scrolling up")
    }

    this.lastScrollTop = event.detail.scrollTop;
}

如何检测离子4中的滚动方向

How to detect scroll direction in ionic 4

ionic-framework

ionic3

ionic4

HTML

Javascript (v1)

Javascript (v2)