En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con Ionic
Hola a todos:
El post de hoy es por cortesía de Miguel Escribano.
Miguel ha realizado una app en ionic para consultar las noticias de menéame que está realmente bien y que podéis encontrar en google play en el siguiente enlace:
https://play.google.com/store/apps/details?id=com.miguelescribano.meneame
Bién, Miguel que ha querido colaborar aportando una directiva para mostrar u ocultar un menú o barra de herramientas al hacer scroll:
Una directiva es un tipo de componente pensado para cambiar el comportamiento de un elemento ya existente en el DOM. A diferencia de un componente normal este no necesita de una plantilla sino que se incrustara en una existente para manipularla.
El objetivo aquí es esconder una barra de navegación al hacer scroll hacia abajo y que aparezca cuando hacemos scroll hacia arriba.
En ionic el evento de scroll se produce en el content, por tanto dicha barra ha de encontrarse dentro de ion-content.
Vamos a crear un proyecto de prueba para mostrar como funciona esta directiva:
ionic start hideMenu blank
Vamos a editar home.ts y le vamos a añadir un array con los items que mostraremos en el listado, por ejemplo una lista de videojuegos:
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { items = [ 'Pokemon Yellow', 'Super Metroid', 'Mega Man X', 'The Legend of Zelda', 'Pac-Man', 'Super Mario World', 'Street Fighter II', 'Half Life', 'Final Fantasy VII', 'Star Fox', 'Tetris', 'Donkey Kong III', 'GoldenEye 007', 'Doom', 'Fallout', 'GTA', 'Halo', 'Warcraft II' ]; constructor(public navCtrl: NavController) { } }
Ahora vamos a editar home.html y añadimos el siguiente código en amarillo en ion-content para generar la toolbar y los items de prueba:
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content hide-menu> <ion-toolbar no-border-top class='show-header'> <ion-segment color='secondary' [(ngModel)]="section"> <ion-segment-button value="portada"> Portada </ion-segment-button> <ion-segment-button value="nuevas" > Nuevas </ion-segment-button> <ion-segment-button value="populares"> Populares </ion-segment-button> <ion-segment-button value="mas_visitadas"> + Visitadas </ion-segment-button> </ion-segment> </ion-toolbar> <ion-list> <button ion-item *ngFor="let item of items" (click)="itemSelected(item)"> {{ item }} </button> </ion-list> </ion-content>
Como podéis ver en la etiqueta ion-content hemos añadido hide-menu que es el nombre de la directiva que vamos a crear.
Después hemos añadido una ion-toolbar con ion-segment y cuatro opciones que será la barra de menú que vamos a mostrar u ocultar.
Por ultimo mostramos un listado donde mostramos con *ngFor los items que hemos definido en el controlador.
Véase que de entrada la barra tiene la clase show-header. Incluiremos esta y hide-header en la listado.scss con la intención de hacerla aparecer y desaparecer respectivamente.
También necesitamos definir la posición de ion-tollbar como fixed.
Suponiendo que nuestro header principal (ion-header) tiene la altura 56px por defecto incluiremos lo siguiente en listado.scss:
page-home {
ion-toolbar {
position:fixed;
}
.hide-header{
top: 0px;
}
.show-header{
top: 56px;
}
}
Ya solo queda crear la directiva, para ello vamos a utilizar ionic generator:
ionic g directive hide-menu
Al generar la directiva nos habrá creado una carpeta directives y dentro estará la carpeta hide-menu con la directiva que acabamos de crear.
Necesitamos declarar la directiva en app.module.ts, por lo tanto lo editamos y añadimos lo siguiente:
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { HideMenuDirective } from '../directives/hide-menu/hide-menu'; @NgModule({ declarations: [ MyApp, HomePage, HideMenuDirective ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {}
Ahora editamos el archivo hide-menu.ts de nuestra directiva y vamos a importar e inyectar en el constructor ElementRef, Renderer2, que necesitaremos para manipular los elementos de la vista:
import { Directive, ElementRef, Renderer2 } from '@angular/core'; /** * Generated class for the HideMenuDirective directive. * * See https://angular.io/api/core/Directive for more info on Angular * Directives. */ @Directive({ selector: '[hide-menu]' // Attribute selector }) export class HideMenuDirective { constructor(public element:ElementRef, public renderer:Renderer2) { console.log('Hello HideMenuDirective Directive'); } }
Vemos que en el decorador @Directive viene definido el selector que es el que tenemos que poner en el elemento de la vista al que queremos aplicar la directiva.
Ahora en la definición de la directiva a la propiedad host le vamos a asignar el evento ionScroll y le indicamos que ejecute la función handleScroll que definiremos después. Host hace referencia al elemento donde estamos aplicando la directiva, en este caso se lo estamos asignando al elemento ion-content:
@Directive({ selector: '[hide-menu]', // Selector de la directiva host: { '(ionScroll)': 'handleScroll($event)' // Captura el evento scroll (ionScroll) dentro de ion content y envía el evento a su manejador handleScroll } })
Ahora necesitamos definir tres variables:
export class HideMenuDirective { private toolBarRef:any; private storedScroll: number = 0; private threshold: number = 10; constructor(public element:ElementRef, public renderer:Renderer2) { }
Una vez definidas las variables en ngOnInit hacemos que toolBarRef referencie al elemento del DOM que contiene la barra, ngOnInit se ejecuta una única vez al iniciar, es parecido al constructor:
ngOnInit() { //Con esto conseguimos referenciar la barra de navegacion mediante su clase. this.toolBarRef = this.element.nativeElement.getElementsByClassName("toolbar")[0]; }
Una vez hecho esto ya podemos definir la función handleScroll que como hemos indicado se ejecutará al hacer scroll sobre el elemento ion-content al que hemos asignado la directiva:
handleScroll(event) { if (event.scrollTop - this.storedScroll > this.threshold) { //al hacer scroll down hace desaparecer la barra mediante clases this.renderer.addClass(this.toolBarRef,'hide-header'); this.renderer.removeClass(this.toolBarRef,'show-header'); } else if (event.scrollTop - this.storedScroll < 0) { //al hacer scroll up la hace aparecer de nuevo this.renderer.removeClass(this.toolBarRef,'hide-header'); } //actualizmos la ultima posicion conocida del scroll proveniente del evento this.storedScroll = event.scrollTop; }
En esta función comprobamos si la posición actual del scroll (event.scrollTop) menos la posición anterior es mayor que el limite (threshold), si es así es que estamos haciendo scroll hacia abajo por lo tanto con this.renderer.addClass le añadimos a la toolbar la clase hide-header que hará que se oculte la barra y con removeClass eliminamos la clase show-header que tenia.
En caso contrario significa que estamos haciendo scroll hacia arriba por lo tanto eliminamos la clase hide-header que oculta la barra, lo que hará que esta se vuelva a mostrar.
El código completo de la directiva quedaría así:
import { Directive, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '[hide-menu]', //selector de la directiva host: { '(ionScroll)': 'handleScroll($event)' //Captura el evento scroll (ionScroll) dentro de ion content y envia el evento a su manejador handleScroll } }) export class HideMenuDirective { //Varaibles para referenciar la barra private toolBarRef:any; //Variables para saber la direccion del scroll private storedScroll: number = 0; private threshold: number = 10; constructor(public element:ElementRef, public renderer:Renderer2) { } ngOnInit() { //Con esto conseguimos referenciar la barra de navegacion mediante su clase. this.toolBarRef = this.element.nativeElement.getElementsByClassName("toolbar")[0]; } handleScroll(event) { if (event.scrollTop - this.storedScroll > this.threshold) { //al hacer scroll down hace desaparecer la barra mediante clases this.renderer.addClass(this.toolBarRef,'hide-header'); this.renderer.removeClass(this.toolBarRef,'show-header'); } else if (event.scrollTop - this.storedScroll < 0) { //al hacer scroll up la hace aparecer de nuevo this.renderer.removeClass(this.toolBarRef,'hide-header'); } //actualizmos la ultima posicion conocida del scroll proveniente del evento this.storedScroll = event.scrollTop; } }
Si ejecutáis el ejemplo con ionic serve -l obtendreis algo como esto:
Bien, eso es todo por hoy, solo me resta agradecer a Miguel Escribano por su aporte y recomendaros que descarguéis su app meneame.
Si necesitas desarrollar una aplicación móvil no dudes en solicitarme un presupuesto sin compromiso:
Un saludo, y si aún no lo has hecho no olvides suscribirte a mi blog para no perderte los próximos posts :-),También puedes seguirme en Twitter en @revigames y no olvides que me ayudas mucho si compartes este post en las redes sociales.
Amigo Miguel ese proyecto esta para ionic v.6 ? tengo un error en los eventos de los botones. Agradezco tu colaboración. Gracias