Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Infinite Scroll

¿Cómo puedes hacerlo?

En esta ocasión vamos a instalar un infinite scroll en una página o entrada que lleve un repeater de Oxygen.
Para ello nos vamos a valer de una librería Infinite Scroll , añadiendo solamente un botón y un Code Block en el que meteremos un poco de código JS, CSS y HTML.
Empezamos como siempre siguiendo los pasos que mostramos.

  1. Justo debajo de donde termina el bloque del repeater añadimos un Div y dentro de este un Code Block y un botón.
    A este botón hay que darle la clase "view-more-button", sin las comillas, pero puede personalizarse a gusto.
    (ver imagen abajo donde mostramos una disposición del Panel de Estructura para mejor comprensión).
Selector-Detector-oxygenados
  1. En la sección de JavaScript del Code Block añadimos el siguiente código:
document.addEventListener("DOMContentLoaded", function() {
	if(window.angular) return;

	var infScroll = new InfiniteScroll( '.oxy-dynamic-list', {
		path: '.next.page-numbers',
		append: '.oxy-dynamic-list > .ct-div-block',
		hideNav: '.oxy-repeater-pages-wrap',
		button: '.view-more-button',
		status: '.loading-status',
		scrollThreshold: false, // disable load on scroll 
	});
});

Click para Copiar
Copiado
  1. En la sección de CSS metemos:

.loading-status {
	display: none; 
	text-align: center;

}

.loader-wheel {
  font-size: 64px;
  position: relative;
  height: 1em;
  width: 0.55em;
  padding-left: 0.45em;
  animation: loader-wheel-rotate 0.5s steps(12) infinite;
  overflow: hidden;
}

.loader-wheel i {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 0.1em;
  border-radius: 0.05em;
  background: #333;
  opacity: 0.8;
  transform: rotate(-30deg);
  transform-origin: center 0.5em;
}

@keyframes loader-wheel-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Click para Copiar
Copiado
  1. Y por último en la sección PHP/HTML:
    Nota:
    Los textos:
    • "Estás al final del contenido" y "Hay algún Error"
    Los puedes sustituir por algo de tu gusto.

    Hay mas opciones de configuración como por ejemplo la animación de carga, la cual se puede ver en Aqui y no está de mas pasarse a leer la licencia.

<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<div class="loading-status">
<div class="loader-wheel infinite-scroll-request">
  <i><i><i><i><i><i><i><i><i><i><i><i>
  </i></i></i></i></i></i></i></i></i></i></i></i>
</div>
  <p class="infinite-scroll-last c-text-s c-text-light">Estás al final del contenido</p>
  <p class="infinite-scroll-error c-text-s c-text-light">Hay algún Error</p>
</div>
Click para Copiar
Copiado
0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios

OTRAS GUIAS

Modo Multi-Usuario y Edit Locking

Oxygen Builder es una herramienta increíblemente poderosa, pero cuando se trata de colaboración en equipo las cosas pueden ponerse un poco difíciles.

Leer más
Liquid Accordion sin Código

Vamos a mostrar como crear un hermoso efecto llamado "Liquid Accordion" sin necesidad de código ni JavaScript ni CSS.

Leer más
Migrar un Sitio hecho con Oxygen Builder

artículo de Oxygenados, donde te daremos 5 sencillos pasos para migrar un sitio construido con Oxygen Builder de ....

Leer más
LISTADO GUIAS