Ionic 2 滚动事件答案

【问题标题】：Ionic 2 scroll eventIonic 2 滚动事件
【发布时间】：2016-09-11 04:22:28
【问题描述】：

我有一个离子滚动组件。我试图在滚动期间执行一些代码。在 Ionic 1 中，这可以使用 on-scroll 属性并传递一个函数。

文档也丢失了。 Ionic 2 中是否有内置方法来检测滚动，还是我必须依靠使用 jQuery 或窗口滚动事件添加自己的事件处理程序？

【问题讨论】：

这是最好的解决方案：stackoverflow.com/a/43186715/3786343

标签： ionic2

【解决方案1】：

我在这里找到了解决方案：“On-scroll” not working in

在"ngAfterViewChecked" 中使用"addScrollEventListener"。

【讨论】：

当前解决方案forum.ionicframework.com/t/scrolling-event-in-ion-content/55563/…

【解决方案2】：

你可以使用滚动组件的addScrollEventListener方法，像这样：

this.scroll.addScrollEventListener((event) => {
    console.log(event);
});

您的 HTML：

<ion-header>
    <ion-navbar>
        <ion-title>Title</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="no-scroll">
    <ion-scroll></ion-scroll>
</ion-content>

您的打字稿：

import {Component, ViewChild} from '@angular/core';
import {Scroll} from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    @ViewChild(Scroll) scroll: Scroll;

    constructor() {}

    ngAfterViewInit() {
        this.scroll.addScrollEventListener(this.onScroll);
    }

    onScroll(event) {
        console.log(event);
    }
}

【讨论】：

嗨，如何监听 ion-scroll 的 scrollStarted & scrollEnd 事件？

【解决方案3】：

我从这里找到了这个解决方案：https://forum.ionicframework.com/t/ionic-2-rc4-addscrolllistener/73145/16?u=kamleshappster

this.content.ionScroll.subscribe(($event) => {
 this.scrollAmount = $event.scrollTop;
});

【讨论】：