Ionic 2滚动事件

Question

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

该文档也丢失。在Ionic 2中是否有内置的检测滚动功能，还是我不得不使用jQuery或窗口滚动事件添加我自己的事件处理程序？

Answer 1

我发现这里的解决方案：“On-scroll” not working in

使用"addScrollEventListener"内"ngAfterViewChecked"。

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

Answer 3

，我发现从这里该解决方案：https://forum.ionicframework.com/t/ionic-2-rc4-addscrolllistener/73145/16?u=kamleshappster

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