web-dev-qa-db-ja.com

OnScrollイベントIonic 2

ユーザーがIonic 2をスクロールしたときに拾うと混乱します。基本的に、ユーザーがページを下にスクロールしたとき、何かをします。

どんな例でも素晴らしいでしょう。

更新：

私はコンストラクタにこれを持っているので、ページがスクロールするとき、キーボードは開いたままになり、他に閉じる方法がないため、キーボードを閉じます。

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Content } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';

export class SearchPage {

  @ViewChild(Content)
  content:Content;

  constructor(public keyboard: Keyboard, public formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication, private http: Http) {

    this.content.ionScroll.subscribe((data)=>{
      this.keyboard.close();
    });
  }
}

ただし、このエラーが表示されるCannot read property 'ionScroll' of undefined間違った場所に置いていますか？

angulartypescriptionic-frameworkionic2
9
BA1995

コンテンツイベントにサブスクライブできます。

コンテンツの つの出力イベント ：

  • ionScrollすべてのスクロールイベントで生成されます。
  • ionScrollEndスクロールが終了すると生成されます。
  • ionScrollStartスクロールが最初に開始されたときに生成されます。

イベントを聞く：

@ViewChild(Content)
content: Content;
// ...
ngAfterViewInit() {
  this.content.ionScrollEnd.subscribe((data)=>{
    //... do things
  });
}

または、DOMから実行します。

<ion-content (ionScroll)="onScroll($event)">

For Ionic 4

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">
36
Erevald

NgOnInitメソッドを使用して、スクロールイベントを登録できます。

ngOnInit() {
   if (this.content) {
      this.content.ionScroll.subscribe((data)=>
        this.keyboard.close();
      });
    }
  }
1
Mahendra Hirapra

カスタムディレクティブ内で次のようなものを試してください。

import { Renderer2 } from '@angular/core';
...
constructor(private renderer: Renderer2) {}

ngOnInit() {
    this.renderer.listen(this.myElement, 'scroll', (event) => {
        // Do something with 'event'
        console.log(this.myElement.scrollTop);
    });
}
0
alex351