So scrollen Sie in ionic oben auf der Seite

Lesezeit: 3 Minuten

Derzeit arbeite ich im ionischen Framework an Javascript und Angular-Js. Ich habe nur das Suchfeld eingefügt und die Kundenliste gerendert, aber angenommen, im ersten Versuch kann ich mit ‘a’ suchen. Es werden alle Artikel angezeigt, die Alpha ‘a’ haben, aber das Problem ist Wenn ich nach unten scrolle, um die Suchergebnisliste zu sehen, und unten, wenn ich mit ‘d’ suchen möchte, gibt es dieses Mal ein Ergebnis, aber oben auf der Seite, aber mein Scroll befindet sich am Ende der Seite. Um das obige Problem zu lösen, möchte ich die Bildlaufposition oben auf der Seite festlegen, wenn die Suchanfrage leer ist, und alle Kunden anzeigen. Was soll ich also tun, um dieses Problem zu lösen?

danke im adv..

Du kannst es versuchen :

$ionicScrollDelegate.scrollTop();

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

  • Vielen Dank, genau was ich brauchte!

    – Stan

    18. Juni 2019 um 2:42 Uhr

Verwenden Sie für Ionic 2 und höher die scrollToTop() -Methode für die Inhaltsklasse.

seite.html

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

Seite.ts

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

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

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

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

  • Das funktioniert nicht. Ich erhalte diesen Fehler – Laufzeitfehler Kann die Eigenschaft „scrollToTop“ von null nicht lesen

    – Sonniger Kumar

    2. November 2017 um 7:39 Uhr

  • @SunnyKumar versuche “` this.content && this.content.scrollToTop() “`

    – designNerd

    10. April 2019 um 23:40 Uhr


Benutzeravatar von Junaid
Juniid

Normalerweise mache ich das auf meiner Homepage.

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

Oder Sie können scrollTop() jederzeit aufrufen. Hinweis: 400 ist die Dauer in Millisekunden, es ist optional und Sie können dies auch verwenden

this.content.scrollToTop();

in diesem Fall setzt scrollToTop() den Standardwert von 300.

Für Ionic 4 wurde dies von umbenannt Content zu IonContentzusammen mit einem neuen Paketnamen:

Damit das Snippet so aussieht:

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

Danke @Junaid (https://stackoverflow.com/a/48987846/156388) für die Basis dieser Antwort.

Ich habe diese Antwort nicht bearbeitet, da sie für Ionic 2-3 immer noch gültig ist.

Die obige Antwort wird alle Ihre Ansichten nach oben scrollen. Wenn Sie mehr Kontrolle haben möchten, müssen Sie einen Delegate-Handler verwenden.

Was auch immer Sie scrollen möchten, Sie müssen zuerst den Namen des Delegate-Handlers hinzufügen

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

In Ihrem Controller müssen Sie diesen Handler verwenden

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

Ich würde empfehlen, ein $timeout zu verwenden, da es bei einem aktuellen Digest-Zyklus nicht funktioniert. Auch ändern FALSCH zu Stimmt wenn Sie die Schriftrolle animieren möchten. Zum Schluss das Spritzen nicht vergessen $ionicScrollDelegate und $Zeitüberschreitung in Ihrem Steuergerät

Für die neueste stabile Version von Ionic 4.X Probieren Sie dies aus

Quelle Verknüpfung

Geben Sie hier die Bildbeschreibung ein

Fügen Sie auf der Seite die Angular-Variablen-ID hinzu Ionengehalt Schild

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()"
>

     <ion-button (click)="ScrollToTop()">
        Scroll To Top
     </ion-button>

</ion-content>

Im Komponente Methoden hinzufügen

      logScrollStart(){
        console.log("logScrollStart : When Scroll Starts");
      }

      logScrolling(){
        console.log("logScrolling : When Scrolling");
      }

      logScrollEnd(){
        console.log("logScrollEnd : When Scroll Ends");
      }

      ScrollToBottom(){
        this.content.scrollToBottom(1500);
      }

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

      ScrollToPoint(X,Y){
        this.content.scrollToPoint(X,Y,1500);
      }

Benutzeravatar von Gi Tavares
Gi Tavares

Für Ionic 4 haben die Ansätze hier sehr geholfen. Es wurde jedoch ein zweiter Param benötigt

@ViewChild(IonContent) content: IonContent;

Also habe ich die Statik wie vorgeschlagen auf false gesetzt hier. Aber es funktionierte nur für mich, als ich änderte:

@ViewChild(IonContent, {static: false}) content: IonContent;

zu

@ViewChild(IonContent, undefined) content: IonContent;

1430220cookie-checkSo scrollen Sie in ionic oben auf der Seite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy