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

@Component({
  selector: 'page-home',
  template: `
    <ion-content (ionScroll)="onScroll($event)">
      <!-- 内容 -->
    </ion-content>
  `
})
export class HomePage {
  @ViewChild(Content) content: Content;

  onScroll(event) {
    console.log('Scroll event:', event);
    // 这里可以处理滚动逻辑
  }
}

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

@Component({
  selector: 'page-home',
  template: `
    <ion-content (ionScrollEnd)="onScrollEnd($event)">
      <!-- 内容 -->
    </ion-content>
  `
})
export class HomePage {
  @ViewChild(Content) content: Content;

  onScrollEnd(event) {
    console.log('Scroll ended:', event);
    // 滚动完全停止时触发
  }
}

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'page-home',
  template: `
    <div #scrollContainer style="overflow: auto; height: 100%;">
      <!-- 内容 -->
    </div>
  `
})
export class HomePage implements AfterViewInit {
  @ViewChild('scrollContainer') scrollContainer: ElementRef;

  ngAfterViewInit() {
    this.scrollContainer.nativeElement.addEventListener('scroll', (event) => {
      console.log('Native scroll event:', event);
    });
  }
}

import { debounce } from 'lodash';

// 在组件中
onScroll = debounce((event) => {
  console.log('Debounced scroll event:', event);
}, 200);