web-dev-qa-db-fra.com

Événement OnScroll Ionic 2

Ramasser quand un utilisateur défile sur Ionic 2 me déroute. Je veux fondamentalement dire, quand un utilisateur fait défiler la page, faire quelque chose.

Tous les exemples seraient géniaux.

METTRE À JOUR: 

J'ai ceci dans mon constructeur, donc quand la page défile je veux fermer le clavier, car il est laissé ouvert et aucun autre moyen de se fermer.

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

Cependant, je reçois cette erreur Cannot read property 'ionScroll' of undefined. Est-ce que je la mets au mauvais endroit?

angulartypescriptionic-frameworkionic2
8
BA1995

Vous pouvez vous abonner à des événements de contenu.

Le contenu a 3 événements de sortie :

  • ionScroll Émis à chaque événement de défilement.
  • ionScrollEnd Émis à la fin du défilement.
  • ionScrollStart Émis lorsque le défilement commence.

Écoutez un événement:

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

Ou faites le depuis le DOM:

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

Pour Ionic 4

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

Vous pouvez utiliser la méthode ngOnInit pour enregistrer l'événement de défilement:

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

Dans une directive personnalisée, essayez avec quelque chose comme ceci:

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