Comment afficher/masquer le bouton en fonction de la position du contenu défiler dans Ionic 2

Je souhaite afficher un bouton en fonction de la position de défilement actuelle et de la hauteur du contenu html dynamique. Par exemple: si je suis dans le bas et que la différence entre la position actuelle et la hauteur du contenu est inférieure à 10px, le bouton doit être masqué. sinon, cela devrait être montré.Comment afficher/masquer le bouton en fonction de la position du contenu défiler dans Ionic 2

Source

2017-08-25 Ali H

jQery et google va vous aider – Sand

@Sand oui, droite mais je ne pouvais pas trouver le fond de l'affaire pour Ionic 2 –

Vous pouvez utiliser le composant @ViewChild avec contenu pour obtenir la position de votre vue.

Votre HTML

<ion-content (ionScroll)="scrollFunction($event)"> 
    <!-- ALL YOUR CONTENT --> 
    <button ion-button *ngIf="isShown">YOUR BUTTON<button> 
</ion-content>

Votre .ts

import { ViewChild } from '@angular/core'; // NEEDED IMPORTS 
import { Content } from 'ionic-angular'; 

export class yourPageClass { 
    @ViewChild(Content) content: Content; 
    public isShown: boolean = false; // YOU CAN INITIALIZE IN FALSE SO IT DOESN'T THROW ERROR AND BECAUSE IT'LL BE ON TOP OF PAGE. 

    constructor(){} 
    //THE FUNCTION THAT'LL DO THE MAGIG 
    public scrollFunction = (event: any) => { 
    let dimensions = this.content.getContentDimensions(); // GET THE ion-content DIMENSIONS 
    let bottomPosition = dimensions.contentHeight + dimensions.scrollTop; // THE contentHeight IS THE SIZE OF YOUR CONTENT SHOWN ON SCREEN, THE scrollTop IS HOW MUCH YOU'VE SCROLLED FROM TOP OF YOUR CONTENT. 
    let screenSize = dimensions.scrollHeight; // TOTAL CONTENT SIZE 
    this.isShown = screenSize - bottomPosition <= 10 ? true : false; 
    } 
}

Ainsi, cette façon si votre contenu défile + contenu de l'écran est 10px inférieure à la hauteur totale de votre contenu sur le bouton » ll sera montré.

Si vous devez sho le bouton avec plus ou moins de 10px il suffit de changer le 10 this.isShown = screenSize - bottomPosition <= 10 ? true : false;

Hope this helps.

Source

2017-08-25 13:18:03

Exactement ce dont j'ai besoin .. merci v.much mon ami .. u résout toujours mes problèmes –

Belle réponse, merci! +1 – sebaferreras

-2

Vous pouvez simplement utiliser la marge

<html> 
<form id="hide"> 
<input type="submit" value="submit" onclick="show()"> 
</form> 
<script> 
function show() { 
SCROLL DOWN*

DÉFILEZ VERS LE BAS *: Alors que le bouton margin-bottom < 10px

var x = getElementById('hide'); 
x.setAttribute("style", "display:none");

Je sais que ce n'est pas la réponse complète, parce que je ne sais pas script mais c'est une grande aide pour vous. N'oubliez pas d'utiliser Google :)

Source

2017-08-25 12:15:41

Merci, mais votre réponse n'est pas liée à ma question .. Je demande sur le défilement du contenu et comment savoir si la position du contenu dans le fond ou de ne pas afficher et masquer le bouton –

Comment afficher/masquer le bouton en fonction de la position du contenu défiler dans Ionic 2

Répondre

Questions connexes