检测滚动 - Ionic 4答案

【问题标题】：Detect scroll - Ionic 4检测滚动 - Ionic 4
【发布时间】：2019-07-11 08:09:54
【问题描述】：

我正在尝试检测我何时向上滚动：

<ion-infinite-scroll (ionInfinite)="doInfinite($event)" scrollY="true">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

在使用 Ionic 3 之前，我通过以下方式检测到它：

  doInfinite(infiniteScroll) {

    this.infiniteScroll = infiniteScroll;
    if(infiniteScroll._content.directionY == "up"){
       //paginate
    }
  }

但现在使用 Ionic 4 我不知道如何检测“directionY”

问候

【问题讨论】：

标签： angular scroll ionic4 direction

【解决方案1】：

您可以在离子内容上使用滚动事件。

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)"></ion-content>

然后在你的 ts 文件中

onScroll(event) {
        if (event.detail.deltaY > 0) {
            console.log('scrolling down...');
        } else if (event.detail.deltaY < 0) {
            console.log('scrolling up...');
        }
    }

【讨论】：

【解决方案2】：

您可以尝试使用内容视图子级。

@ViewChild(Content) content: Content;

doInfinite(infiniteScroll) {
    this.infiniteScroll = infiniteScroll;
    this.content.scrollToTop(1000) //add 1 second animation to make it smoother
  }

【讨论】：