wake-up-neo.com

So scrollen Sie oben auf der Seite in ionisch

zur Zeit arbeite ich in ionischen Frameworks für Javascript und Ewige js. Ich habe nur das Suchfeld und die Renderliste des Kunden eingefügt, aber im ersten Versuch kann ich mit 'a' suchen, es zeigt alle Elemente, die Alpha 'a' haben, aber das Problem ist Wenn ich nach unten scrolle, um die Suchergebnisliste zu sehen, und unten, wenn ich diesmal mit 'd' suchen möchte, wird ein Ergebnis angezeigt, das sich jedoch am oberen Rand der Seite befindet, aber meine Bildlaufleiste befindet sich am unteren Rand der Seite Um das obige Problem zu lösen, möchte ich die Scrollposition oben auf der Seite festlegen, wenn die Suchabfrage leer ist und alle Kunden anzeigen. Was soll ich tun, um dieses Problem zu lösen

danke in adv ..

javascripthtmlangularjs
18
Rohit Deshmukh

Du kannst es versuchen :

$ionicScrollDelegate.scrollTop();

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

33
Grégoire Motot

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

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

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

20
Pavel Chuchuva

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

Sie können auch jederzeit scrollTop () aufrufen. Hinweis: 400 ist eine Dauer in Millisekunden. Sie ist optional und kann auch verwendet werden

this.content.scrollToTop ();

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

7
Junaid

Für Ionic 4.X Latest Stable Release Try this

Quelle Link

enter image description here

Fügen Sie auf der Seite Angular variable id on ion-content Tag hinzu

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

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

</ion-content>

Fügen Sie in der Komponente Methoden hinzu

      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);
      }
0
Code Spy

Für Ionic 4 wurde dies zusammen mit einem neuen Paketnamen von Content in IonContent umbenannt:

Das Snippet sieht folgendermaßen aus:

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

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

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

0
rtpHarry

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

Zuerst müssen Sie, was auch immer Sie scrollen möchten, 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. Ändern Sie auch false in true , wenn Sie den Bildlauf animieren möchten. Vergessen Sie nicht, $ ionicScrollDelegate und $ Timeout in Ihren Controller zu injizieren

0
Raj Sharma