Page de défilement magnétique longue forme ionique 2

Question

Hey Guys i besoin de votre aide s'il vous plaît,

commence à travailler sur un ionique 2 App. Ma navigation n'est pas si compliquée. J'ai un menu si je clique sur un élément un autre menu s'ouvre avec un sous-menu et si je clique sur un élément dans le sous-menu une troisième page devrait rendre au-dessus et cela fonctionne très bien. Maintenant, la troisième activité devrait être un très long site de défilement avec beaucoup de section (les sections sont les unes sur les autres). Et chaque section devrait avoir une barre d'outils avec un bouton de retour pour revenir au sous-menu et deux touches fléchées pour la section précédente ou suivante.

Voici une petite image

maintenant mes problèmes:

comment puis-je réaliser la partie magnétique? Je pense que c'est comme ça: le Barreau se trouve en haut de la page et au-dessus du contenu. Quand je fais défiler le contenu va dessous et je peux faire défiler jusqu'à la fin. Quand iam à la fin tout devrait s'arrêter et quand je tire plus loin la barre de section suivante saute vers le haut de mon site.

J'espère que vous pouvez me vous remercie aider;)

Answer 1

Plunker Demo

Pour faire ce travail, vous devez:

• créer une fonction qui défile votre élément scroll-content vers le haut
• Suivre la position de défilement de scroll-content
• Utiliser *ngIf sur votre défilement vers le haut pour afficher conditionnellement après scroll-content a atteint un certain seuil.

de défilement vers le haut fonction

I adapté this SO answer à 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 en tant que seuil pour montrer le rouleau vers le haut bouton comme ceci:

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> 

composante à part entière Tapuscrit

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

} 

composante à part entière 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>