web-dev-qa-db-fra.com

Comment faire défiler en haut de la page en ionique

actuellement, je travaille dans un cadre ionique sur javascript et angular-js. Je viens de mettre le champ de recherche et de rendre la liste des clients, mais supposons que, dans un premier temps, je puisse effectuer une recherche avec "a", il affiche tous les éléments ayant un alpha "a", Lorsque je fais défiler l'écran vers le bas pour voir la liste des résultats de recherche et en bas, si je souhaite effectuer une recherche avec 'd', cette fois, le résultat est affiché mais en haut de la page, mais mon défilement se trouve en bas de la page. pour résoudre le problème ci-dessus, je veux définir la position de défilement en haut de la page lorsque la requête de recherche est vide et afficher tous les clients; que dois-je faire pour résoudre ce problème

merci d'avance ..

javascripthtmlangularjs
18
Rohit Deshmukh

Tu peux essayer :

$ionicScrollDelegate.scrollTop();

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

33
Grégoire Motot

Pour Ionic 2 et versions supérieures, utilisez la méthode scrollToTop() sur la classe de contenu.

page.html

<ion-content>
  Add your content here!
</ion-content>

page.ts

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

Voir http://ionicframework.com/docs/api/components/content/Content/#scrollToTop

20
Pavel Chuchuva

Je le fais normalement sur ma page d'accueil.

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop(400);
  }
  ionViewDidEnter(){
    this.scrollToTop();
  }
}

Ou vous pouvez appeler scrollTop () à tout moment. Remarque: 400 est la durée en millisecondes, il est optionnel et vous pouvez l’utiliser aussi

this.content.scrollToTop ();

dans ce cas, scrollToTop () définira la valeur par défaut de 300.

7
Junaid

Pour Ionic 4, il a été renommé de Content à IonContent, avec un nouveau nom de package:

Faire l'extrait ressembler à ceci:

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

@Component({...})
export class MyPage{
  @ViewChild(IonContent) content: IonContent;

  scrollToTop() {
    this.content.scrollToTop(400);
  }
  ionViewDidEnter(){
    this.scrollToTop();
  }
}

Merci @Junaid ( https://stackoverflow.com/a/48987846/156388 ) pour la base de cette réponse. 

Je n'ai pas modifié cette réponse car elle est toujours valable pour Ionic 2-3.

0
rtpHarry

La réponse ci-dessus fera défiler tous vos points de vue. Si vous voulez avoir plus de contrôle, vous devrez utiliser un gestionnaire de délégués.

Tout ce que vous voulez faire défiler, vous devrez d'abord ajouter le nom du gestionnaire de délégués 

<ion-content delegate-handle="dashboard">
   ......
</ion-content>

Dans votre contrôleur, vous devrez utiliser ce gestionnaire

$timeout(function(){$ionicScrollDelegate.$getByHandle('dashboard').scrollTop(false);});

Je recommanderais d'utiliser un timeout $, car s'il y a un cycle de digestion en cours, cela ne fonctionnera pas. Changez également false en true si vous souhaitez animer le défilement. Enfin, n'oubliez pas d'injecter $ ionicScrollDelegate et $ timeout dans votre contrôleur

0
Raj Sharma