Como implementar a rolagem infinita em um aplicativo da Web
O scroll infinito permite que o conteúdo seja carregado continuamente à medida que os utilizadores descem na página, ao contrário do método de paginação tradicional, em que se clica para carregar. Esta funcionalidade pode oferecer uma experiência mais suave, especialmente em dispositivos móveis.
Explore o processo de implementação de uma interface de deslocamento infinito utilizando HTML fundamental, CSS estilístico e técnicas JavaScript versáteis.
Configurando o front-end
Utilize uma estrutura HTML fundamental para exibir seu conteúdo. Um exemplo é o seguinte:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1>
<div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
alt="Jacket" />
</div>
<script src="script.js"></script>
</body>
</html>
um ficheiro Cascading Style Sheets (CSS) e um ficheiro JavaScript (JS).
Estilo CSS para conteúdo rolável
Para apresentar os gráficos do espaço reservado numa disposição semelhante a uma grelha, inclua as seguintes regras de estilo no seu ficheiro “style.css”:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body {
font-family: Cambria, Times, "Times New Roman", serif;
}
h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}
img {
width: 100%;
display: block;
}
.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.products__list > * {
width: calc(33% - 2rem);
}
.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}
Atualmente, o aspeto da sua página Web deve assemelhar-se à disposição e ao design fornecidos abaixo:
Implementação principal com JS
Para incorporar eficazmente a funcionalidade de deslocamento infinito na sua aplicação Web, é crucial monitorizar a proximidade do utilizador à base da área de conteúdo ou a toda a página Web. Isto pode ser conseguido utilizando JavaScript e CSS para observar a posição do evento de deslocamento em relação à altura da janela de visualização e desencadear as acções adequadas em conformidade.
"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY \\+ window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Para começar, desenvolveremos uma função que recupera dados adicionais de espaço reservado. Isto pode ser conseguido através da implementação de uma chamada à API ou utilizando uma consulta à base de dados, dependendo dos requisitos específicos da sua aplicação. Os dados recuperados serão depois utilizados como entrada para processamento e apresentação na interface do utilizador.
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
console.log(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
}
}
Para este projeto, pode utilizar a API de fakestoreapi .
Para verificar se os seus dados estão a ser recuperados à medida que percorre a página, seria aconselhável examinar a consola do programador do browser para ver se há alguma saída ou indicação de sucesso na recuperação dos dados. Isso pode fornecer informações e comentários úteis sobre a funcionalidade do script.
Para mitigar potenciais problemas de desempenho resultantes da recuperação repetitiva de dados durante o deslocamento, recomenda-se estabelecer um estado de carregamento inicial para as informações, garantindo assim um funcionamento eficiente do dispositivo.
let isFetching = false;
Para garantir que a extração de dados é efectuada de forma eficiente, é necessário modificar a implementação da função fetch de modo a só prosseguir com a extração de informação depois de a sua antecessora ter sido concluída com êxito. Isto pode ser conseguido através da introdução de lógica adicional no código para monitorizar e gerir o fluxo de execução de múltiplos pedidos simultâneos, evitando assim quaisquer potenciais estrangulamentos ou atrasos que possam surgir devido a operações simultâneas em recursos partilhados.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true; // Set the flag to true
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false; // Reset the flag to false
}
}
Apresentar o novo conteúdo
Para atualizar dinamicamente a representação visual do feed de notícias à medida que o utilizador o percorre, uma abordagem consiste em definir uma função que modifica o elemento principal que contém os itens da lista que representam cada publicação no feed. Isto pode ser conseguido anexando novos elementos de imagem a este contentor à medida que o utilizador percorre a página, actualizando efetivamente a parte apresentada do feed com as mensagens mais recentes.
Primeiro, selecione o elemento pai:
const productsList = document.querySelector(".products__list");
Em seguida, crie uma função para anexar conteúdo.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement); // Append to productsList container
});
}
Em conclusão, é necessário alterar a função fetch e encaminhar as informações recuperadas para o método append .
async function fetchMoreContent() {
if (isFetching) return;
isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
isFetching = false;
}
}
De facto, a implementação de uma funcionalidade de scroll infinito foi integrada com sucesso, permitindo assim uma navegação sem problemas através de um conjunto aparentemente interminável de conteúdos à medida que se avança na página.
Melhorias no scroll infinito
Para melhorar a experiência do utilizador, recomenda-se que seja apresentado um indicador de carregamento durante a recuperação de novos conteúdos. Isto pode ser conseguido através da incorporação do seguinte código HTML.
<h1 class="loading-indicator">Loading...</h1>
Em seguida, seleccione o elemento de carregamento.
const loadingIndicator = document.querySelector(".loading-indicator");
Em conclusão, implemente duas funções que controlam o estado de apresentação do indicador de carregamento utilizando JavaScript.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}
function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Em seguida, adicione-as à função fetch.
async function fetchMoreContent() {
if (isFetching) return; // Exit if already fetching
isFetching = true;
showLoadingIndicator(); // Show loader
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("Network response was not ok");
}
let data = await response.json();
displayNewContent(data);
} catch (error) {
console.error("There was a problem fetching new content:", error);
} finally {
console.log("Fetch function fired");
hideLoadingIndicator(); // Hide loader
isFetching = false;
}
}
O que dá:
O seu browser não suporta a etiqueta de vídeo.
Boas práticas para rolagem infinita
Algumas práticas recomendadas a serem seguidas incluem:
É aconselhável evitar solicitar um número excessivo de itens de uma só vez, pois isso pode fazer com que o navegador fique atolado e diminua a eficiência geral.
Para atenuar o problema dos frequentes pedidos de rede causados pela busca imediata de conteúdos após a deteção de um evento de deslocamento, uma abordagem consiste em utilizar um mecanismo de debouncing. Ao empregar esta técnica, a operação de busca de conteúdo será adiada por um determinado período de tempo após a ocorrência do evento de deslocamento. Como resultado, ajuda a reduzir o número de pedidos de rede desnecessários e melhora o desempenho geral.
Embora alguns utilizadores possam apreciar a conveniência do deslocamento infinito, é importante reconhecer que nem todos partilham esta preferência. Fornecer uma opção alternativa sob a forma de um componente de paginação pode ser benéfico para aqueles que a consideram mais eficiente ou fácil de utilizar. Em última análise, a oferta de ambas as opções permite às pessoas adaptarem a sua experiência de navegação de acordo com as suas necessidades e preferências individuais.
Seria mais adequado notificar o utilizador quando não há mais conteúdo para carregar, em vez de tentar repetidamente recuperar dados adicionais.
Dominar o carregamento contínuo de conteúdos
A incorporação do scrolling infinito no design de um sítio Web oferece uma experiência de utilizador perfeita, especialmente em dispositivos móveis, que é cada vez mais frequente no panorama digital atual. Ao seguir as directrizes fornecidas neste artigo, os programadores podem integrar eficazmente esta funcionalidade nos seus projectos Web.
Ao conceber um sítio Web, é importante ter em conta as emoções dos utilizadores que vão interagir com ele. Para facilitar uma experiência positiva, apresente indicadores de progresso e forneça mensagens de erro claras que informem os utilizadores de quaisquer problemas que possam surgir durante a sua interação com o sítio.