检测滚动条-离子4

Question

我试图检测何时向上滚动：

<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”

问候

Answer 1

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

@ViewChild(Content) content: Content;

---

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

Answer 2

您可以对离子含量使用滚动事件。

<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...');
        }
    }