web-dev-qa-db-fra.com

Ajouter un bouton de défilement vers le haut (Ionic 2 | TypeScript)

Bonjour à tous, j'essaie d'ajouter "défilement vers le haut du bouton". qui implémentent les éléments suivants:

1.Afficher le bouton lorsque l'utilisateur a fait défiler l'écran vers le bas. 2. Masquer le bouton lorsque l'utilisateur fait défiler l'écran vers le haut. 3.Si vous appuyez sur le bouton, faites défiler l'écran vers le haut et masquez-le. .____.] des suggestions sur la manière de procéder?

merci beaucoup 

cordovatypescriptangularionic2
7
David

Démo Plunker

Pour que cela fonctionne, vous devez:

  • Créez une fonction qui fait défiler votre élément scroll-content vers le haut
  • Suivre la position de défilement de scroll-content
  • Utilisez *ngIf sur le bouton de défilement vers le haut pour afficher conditionnellement après que scroll-content a atteint un certain seuil.

Faites défiler vers le haut fonction

J'ai adapté cette SO réponse à appliquer à l'élément scroll-content

scrollToTop(scrollDuration) {
let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
let scrollInterval = setInterval( () => {
    if ( this.ionScroll.scrollTop != 0 ) {
        this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
    } else {
      clearInterval(scrollInterval);
    }
}, 15);

Track scroll-content position

Cet exemple utilise la hauteur de la fenêtre comme seuil pour afficher le bouton de défilement vers le haut de la manière suivante:

this.ionScroll.addEventListener("scroll", () => {
  if (this.ionScroll.scrollTop > window.innerHeight) {
    this.showButton = true;
  } else {
    this.showButton = false;
  }
});

Bouton html

<button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>

TypeScript à composant complet

import { NavController } from 'ionic-angular/index';
import { Component, OnInit, ElementRef } from "@angular/core";

@Component({
  templateUrl:"home.html"
})
export class HomePage implements OnInit {
  public ionScroll;
  public showButton = false;
  public contentData = [];

  constructor(public myElement: ElementRef) {}

  ngOnInit() {
    // Ionic scroll element
    this.ionScroll = this.myElement.nativeElement.children[1].firstChild;
    // On scroll function
    this.ionScroll.addEventListener("scroll", () => {
      if (this.ionScroll.scrollTop > window.innerHeight) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    });
    // Content data
    for (let i = 0; i < 301; i++) {
      this.contentData.Push(i);
    }
  }
  // Scroll to top function
  // Adapted from https://stackoverflow.com/a/24559613/5357459
  scrollToTop(scrollDuration) {
    let scrollStep = -this.ionScroll.scrollTop / (scrollDuration / 15);
    let scrollInterval = setInterval( () => {
        if ( this.ionScroll.scrollTop != 0 ) {
            this.ionScroll.scrollTop = this.ionScroll.scrollTop + scrollStep;
        } else {
          clearInterval(scrollInterval);
        }
    }, 15);
  }

}

Composant complet HTML

<ion-navbar primary *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
  <button *ngIf="showButton" (click)="scrollToTop(1000)">Scroll Top</button>
</ion-navbar>

<ion-content class="has-header" #testElement>
  <div padding style="text-align: center;">
    <h1>Ionic 2 Test</h1>
    <div *ngFor="let item of contentData">
      test content-{{item}}
    </div>
  </div>
</ion-content>
6
adriancarriger

Simplifier la scrollToTop() de adriancarriger

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

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

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

Source: http://ionicframework.com/docs/v2/api/components/content/Content/

8
José Nicodemos Maia Neto

Tu pourrais essayer ça. En espérant que ça aide

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

import { Content } from 'ionic-angular';

@Component({...})

export class MyPage{

  @ViewChild(Content) content: Content;

  scrollToTop() {

    this.content.scrollToTop();
  }

}
2
jagadeesh

Avec l’aide du code adriancarriger, j’ai essayé ce qui suit pour définir l’élément Div sur Top et cela a fonctionné. Voici mon code.

Html  

<div  #Innholdtext >
<p> add your contents here to set scroll top </>
</div>

app.component.ts 

import { Component, OnInit,  ViewChild, ElementRef } from '@angular/core';
export class app implements OnInit {

@ViewChild('Innholdtext') private hovedInnhold : ElementRef;
    private scrollElement; 
}

   ngOnInit() {
  this.scrollElement = this.hovedInnhold.nativeElement;
        this.scrollElement.addEventListener("click", () =>{
            this.hovedInnhold.nativeElement.scrollTop = 0
        });
}
0
Savitha

Lorsque vous avez un composant dans un composant, vous pouvez avoir des problèmes pour obtenir le contenu dans le composant interne. Cela dit, je devais obtenir l'élément supérieur et appeler pour faire défiler. 

Dans mon cas, lorsqu’on passe à la diapositive suivante, je dois être au top pour la diapositive suivante.

 const element = document.querySelector(".slide-zoom");
      setTimeout(() => { if(element) element.scrollIntoView(true) }, 200);

0
mariomol