Cómo implementar scroll infinito con Javascript y HTML en ASP.NET Razor
Hola.
Tuve que investigar como implementar un scroll infinito como el de los sitios web de moda. De hecho así es como aprendí que lo llaman infinite scroll.
Buscando en internet con este nombre me encontré un plugin en javascript que terminé implementando de manera sencilla. El link del plugin es este:
https://infinite-scroll.com/
Tiene un par de métodos de implementación y la que describo aquí es la que en primera instancia me pareció la mas sencilla y genérica. Implementar con HTML.
Describo aquí lo que necesitan para implementarlo:
1. Descargar del link de arriba en la sección Download cualquiera de estos dos js:
infinite-scroll.pkgd.min.js (minified)
infinite-scroll.pkgd.js (un-minified)
Básicamente la diferencia es que el minified está todo en una sola línea y el otro tiene saltos de línea que lo hace legible. Por supuesto que el primero pesa menos. Yo estoy usando el minified pero da lo mismo.
2. Incluir la referencia en su HTML a donde hayan colocado el js (pueden colocar la ruta absoluta al sitio de infinite-scroll también)
<script type="text/javascript" src="/js/infinite-scroll.pkgd.min.js"></script>
3. Necesitan una pagina dinámica parcial que va a estar resolviendo el listado cuando se hace scroll en el contenido. Yo uso una pagina dinámica programada en c# con vistas cshtml aunque el lenguaje de la página dinámica es irrelevante para efectos del paginado infinito.
Algunas de las características de esta página dinámica son :
Debe recibir un parámetro para controlar el número de página de los resultados que va arrojando
La estructura básica de mi página que resuelve el listado por número de página (_Listado.cshtml):
<div class="lista" data-infinite-scroll='{ "path":".numero-pagina", "append":".elemento","status":".page-load-status","hideNav":".numero-pagina","history":"false"}'>
@{
int j=1;
foreach (var xelemento in Model.Data)
{
<div class="elemento">
<h3 on><span>@j </span><a>@xelemento.Nombre</a></h3>
</div>
j = j+1;
}
}
</div>
<div class="page-load-status">
<p class="infinite-scroll-request">Loading...</p>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
@if (Model.CurrentPage < Model.NumberOfPages)
{
int nextpage=Model.CurrentPage+1;
@Html.ActionLink(nextpage.ToString(), "_Listado", "micontrolador", new { p = nextpage }, new { @class = "numero-pagina" })
}
Contiene el div que inicializa el scroll infinito, dentro vienen los elementos del listado, luego el div con los estatus de carga del plugin y al final una liga hacia la siguiente página.
Las clases css de estos elementos son muy importantes porque el scroll infinito se inicializa a través de los elementos con estas clases.
.elemento: es la clase del div de los elementos de la lista.
.numero-pagina: es la clase de la liga que te lleva a la siguiente pagina
.page-load-status: es la clase del div que contiene los status del plugin
En mi caso la vista parcial _Listado.cshtml recibe un parámetro de nombre p para controlar el paginado (p=1,p=2,p=3,p=4....). En el link con clase numero-pagina se ve cómo se pasa el parámetro incrementado en uno: new {p=nextpage}
4. Llamar a la página parcial dinámica desde la página principal. Algo así:
<html>
<body>
@Html.Partial("_Listado")
</body>
</html>
Con esto tienen implementado el scroll infinito dentro de su pagina web.
Espero les sirva.
No hay comentarios.:
Publicar un comentario