Explorando las posibilidades que nos ofrece Ionic Framework – recordemos, un framework front-end para apps móviles híbridas con HTML5, que esta construido sobre AngularJS –, me encuentro con el interesante componente ionSlideBox, que es un contenedor multipágina donde se puede cambiar de página haciendo el popular gesto swipe (arrastrar hacia un lado o el otro).

Veamos a continuación un GIF muy descriptivo de lo que permite hacer, que se muestra en la propia documentación de Ionic Framework:

Para conseguir este resultado, utilizaríamos un código como el siguiente:

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

Como podemos ver, realmente ofrece una funcionalidad muy útil de forma sencilla. No obstante, cuando lo empezamos a exprimir (y sobretodo en dispositivo móvil), nos encontramos con una pega. Todo el contenido del slide-box se genera en el DOM, independientemente de que se esté mostrando o no.

Esto significa que si tengo un slideBox con 50 imágenes (una por slide), voy a tener que cargar las 50 imágenes, con la consiguiente penalización sobre el rendimiento de la aplicación.

nf-if al rescate

Como muchos habréis pensado ya, esto lo podemos solucionar en un plis con la directiva ng-if, diciéndole al slidebox que renderice solo el slide actual (y si somos un poco elegantes, también el anterior y posterior para que se vean durante la animación de swipe al cambias de slide.

Esa es la idea que tenía yo, hasta que me encontré con un bug de ionSlideBox. Resulta que cuando tenemos diapositivas de las que decidimos de forma dinámica si se renderizan o no, el slider no funciona bien, y empieza a hacer cosas raras como saltar de una diapositiva a otra, o mostrarte diapositivas vacías.

Trick casero para solucionarlo

He reportado el bug, e imagino que en futuras versiones se solucionará este problema. De momento, he descubierto que solo con que el slide cuyo contenido queremos ocultar, tenga algún elemento visible, resolvemos el problema, por lo que nos bastará con añadir un DIV al final del mismo, con un espacio, para asegurarnos de que no se pierde la funcionalidad del ionSlideBox.

A continuación comparto un CodePen para ilustrar el bug y la solución. Espero haber podido ayudar a quien se encuentre con este problema.

Saludos.

See the Pen Hiding slides on ionic SlideBox directive by Enrique (@-kaik-) on CodePen.