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

我想在滚动条上隐藏和显示我的选项卡栏。想要在用户向下滚动时隐藏它，在用户向上滚动时显示它。如何确定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';
    }
}

onScroll（$event:CustomEvent）{
if（$event&&$event.detail&&$event.detail.scrollTop）{
让scrollTop=$event.detail.scrollTop；
log（$event，scrollTop）；
document.querySelector（'ion-tab-bar'）。style.display='none'；
}
}

我认为您只需要在ion content元素上启用滚动事件（Ionic 4需要它），然后将Ionic scroll事件绑定到您的方法，并将选项卡可见性绑定到变量（我在本例中使用了页脚）：

然后将基础服务导入到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>

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

<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

我认为您只需要在ion content元素上启用滚动事件（Ionic 4需要它），并将Ionic scroll事件绑定到您的方法，并将选项卡可见性绑定到变量（我在本例中使用了footer）：

然后将基础服务导入到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>

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

<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

请看一看。请看一看。现在检查一下，如何将页脚隐藏分配到home.page中的tabs.page？@Sireini您使用的是Ionic 4还是3？Ionic 4@surgeyOK明白了，我将用tabs和Ionic 4重新创建演示today@Sireini添加了Ionic 4和tabs Template的实现现在检查它，如何将页脚隐藏分配给home.page中的tabs.page？@Sireini您使用的是Ionic 4还是3？Ionic 4@surgeyOK知道了，我将用tabs和Ionic 4重新创建演示today@Sireini增加了离子4和标签模板的实现

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

}

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>