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 ，然后选择Tabs Starter）

然后创建共享服务（ 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>

然后运行离子发球并尝试一下。我写的方法相当原始且幼稚，因此您想更新/调整滚动事件中哪些更改应要求布尔值为false / true的逻辑。

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;
}

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

2 个答案:

HTML

Javascript (v1)

Javascript (v2)