ionic2 - ionic 2滚动事件

Question

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

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

Answer 1

您可以使用 Scroll 组件的 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>

您的 typescript :

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