1
votes

Comment détecter le défilement en utilisant Ionic 2+ et Angular 2+?

Est-il possible de détecter quand la fenêtre défile?

J'ai essayé d'ajouter HostListener:

this.renderer.listen(
   'window',
   'scroll',
   (evt) => {
      console.log('scroll');
   }
);

Et j'ai essayé d'utiliser Renderer2:

@HostListener("window:scroll", [])
onScroll() {
   console.log('scroll');
}

Aucun des deux ne fonctionne.

angular ionic-framework angular7 ionic2

3 commentaires

je modifie le code plz vérifier

@KiranMistry Cela ne fonctionnait toujours pas. Merci quand même.

Je modifie à nouveau le message s'il vous plaît jeter un oeil à ionic

3 Réponses :

2
votes

La syntaxe est différente dans Ionic2 / 3. Voici comment cela devrait être:

constructor(){}
  scrolling(event) {
    // your content here for scrolling
  }

  scrollComplete(event) {
    // your content here of scroll is finished
  }
}

puis dans votre fichier ts

<ion-content (ionScroll)="scrolling($event)" (ionScrollEnd)="scrollComplete($event)">
  <ion-list>
   ...
  </ion-list>   
</ion-content>

1 commentaires

C'est la solution de contournement que j'utilise mais le problème est que je développe une bibliothèque npm qui n'a pas accès directement à ion-content . De préférence, je peux détecter le défilement depuis le composant sans avoir à passer un Input ()

0
votes

vous pouvez détecter le défilement avec le code ci-dessous, tout comme votre premier extrait de code ..

 @HostListener('window:scroll')
 onWindowScroll():void {
   let isScrolled = window.scrollY > this.heightToCompare;
   if (isScrolled !== false) {
      //  do what you want  
   } 
 }

3 commentaires

J'ai mentionné dans ma question que cela ne fonctionne pas. J'ai ajouté un journal de point d'arrêt et de console et cela ne déclenche pas. C'est peut-être parce que Ionic.

@jrquick cela ne fonctionne pas parce que vous ne devriez pas définir overflow-x: hidden dans le corps ou ne pas définir la hauteur: 100%. ionique pour une raison quelconque est la hauteur de réglage automatique: 100%

@jrquick peut également vous aider stackoverflow.com/questions/43186489/onscroll -event-ionic-2

1
votes

dans votre fichier html ajoutez ceci

@HostListener('ionScroll', ['$event']) onScroll(event){
    console.log(event.detail.scrollTop)
    console.log('im scrolling')
}

dans votre fichier .ts ajoutez ceci

<ion-content [scrollEvents]="true"></ion-content>

0 commentaires