A paginação de rolagem infinita é inspirada em sites como Facebook e Twitter. Esta é apenas a paginação onde, conforme o usuário rola para a parte inferior da página, mais conteúdo é carregado. Isso melhora a experiência do usuário no site, garantindo que sempre haja mais conteúdo na página para os usuários lerem.
Fazendo a paginação de rolagem infinita corretamente
Quando a paginação de rolagem infinita é implementada, há alguns pontos realmente importantes a serem lembrados.
1. Não coloque links importantes na parte inferior
Links importantes não devem estar na parte inferior da página. Isso ocorre porque toda vez que o usuário tenta rolar para baixo para encontrá-los, um novo conjunto de entradas é carregado. Todos os links importantes devem ser fixados em uma barra lateral ou mantidos permanentemente no topo.
2. Planeje com antecedência
É importante que você planeje com antecedência: onde deseja incluir a paginação e como irá processá-la. Uma maneira comum de fazer a paginação é listar os números das páginas na parte inferior da página. Usando o método de rolagem infinita, no entanto, nenhum número de página aparecerá no final de sua lista de artigos, pois eles não são mais necessários. Essa paginação pode ser usada em todos os temas, desde que você não inclua muitas informações na seção de rodapé, pois pode não dar o efeito desejado.
Neste tutorial, vamos aprender como implementar o recurso de rolagem infinita em Javascript.
A página exibirá uma lista de curiosidades sobre gatos, que virão de uma API. A API retorna 10 curiosidades por padrão. Ao rolar para a parte inferior da página, o aplicativo exibirá um indicador para indicar o estado de carregamento do aplicativo. Enquanto isso, o aplicativo chamará a API para carregar o próximo conjunto de curiosidades.
Vamos usar este URL para carregar curiosidades. A API aceita uma string de consulta: page que informa à API qual página carregar.
https://catfact.ninja/facts?page=${page}&limit=${limit}
Agora, vamos começar com o aplicativo.
1. Criar a estrutura do projeto
Primeiro, crie uma pasta com a seguinte estrutura.
root -- index.html -- style.css -- app.js
2. Crie o arquivo HTML
Teremos várias seções em nosso arquivo HTML. UMA container, onde toda a lista rolável de curiosidades será renderizada. UMA quotes seção para cada fato divertido. E, haverá um loader, que ficará visível quando as curiosidades estiverem carregando. o loader ficará invisível por padrão.
Fun Facts about Cats
3. Construa o roteiro
Em seguida, precisamos criar um script, que se conectará com o div e carregará as curiosidades. Para conseguir isso, usaremos o querySelector().
const factsEl = document.querySelector('.facts');
const loader = document.querySelector('.loader');
Também precisamos de algumas variáveis de controle para definir qual conjunto de itens será mostrado na tela. As variáveis de controle neste trecho de código são:
-
currentPage: A página atual é inicializada com 1. Quando você rola para a parte inferior da página, a página atual será incrementada em 1 e uma solicitação de API será feita para obter o conteúdo da próxima página. Quando a página for rolada para o topo, a página atual será diminuída em 1. -
total: Essa variável armazena o número total de citações retornadas pela API Fun Facts.
4. construir o getFacts função
O papel do getFacts função é chamar a API e retornar as curiosidades. o getFacts função aceita um único argumento: page. Ele usa a API Fetch mencionada acima para buscar dados para a rolagem infinita.
Fetch sempre retorna um promiseportanto, vamos usar o await-async sintaxe para receber e processar a resposta. Para obter o json dados, usaremos o json() função. o getFacts A função retornaria uma promessa, que resolverá e retornará o JSON.
const getfacts = async (page, limit) => {
const API_URL = `https://catfact.ninja/facts?page=${page}&limit=${limit}`;
const response = await fetch(API_URL);
// handle 404
if (!response.ok) {
throw new Error(`An error occurred: ${response.status}`);
}
return await response.json();
}
5. construir o showFacts função
Agora que recebemos os fatos divertidos, onde os exibiríamos? É por isso que precisamos ter um showFacts função. o showFacts função funciona iterando através do facts variedade. Então, ele usa o template literal sintaxe para criar uma representação HTML de um fact objeto.
const showfacts = (facts) => {
facts.forEach(fact => {
const factEl = document.createElement('blockfact');
factEl.classList.add('fact');
factEl.innerHTML = `
${fact.fact}
`;
factsEl.appendChild(factEl);
});
};
Uma amostra do gerado blockFact elemento é:
Unlike dogs, cats do not have a sweet tooth. Scientists believe this is due to a mutation in a key taste receptor.
Nós fazemos uso do appendChild função para adicionar o
6. Mostrar e ocultar o indicador de carregamento
À medida que o usuário chega ao final da página, um indicador de carregamento deve ser mostrado. Para isso, vamos introduzir duas funções. Um para carregar e outro para esconder o carregador. nós usaríamos opacity: 1 para mostrar o carregador. E, opacity: 0 para esconder o carregador. Adicionando e removendo opacity mostrará/ocultará o carregador, respectivamente.
const hideLoader = () => {
loader.classList.remove('show');
};
const showLoader = () => {
loader.classList.add('show');
};
7. Confira mais curiosidades
Para garantir o desempenho, vamos introduzir uma função que pode verificar se a API possui mais fatos. o hasMoreFacts() função retornaria true se houver mais itens para buscar. Se não houver mais itens para buscar, as chamadas de API serão interrompidas.
const hasMorefacts = (page, limit, total) => {
const startIndex = (page - 1) * limit + 1;
return total === 0 || startIndex < total;
};
8. Codificar o loadFacts função
o loadFacts A função é responsável por executar quatro ações importantes:
- mostrar ou ocultar o indicador de carregamento
- ligar
getFactsfunção para buscar mais fatos. - mostre os fatos
const loadfacts = async (page, limit) => {
// show the loader
showLoader();
try {
// if having more facts to fetch
if (hasMorefacts(page, limit, total)) {
// call the API to get facts
const response = await getfacts(page, limit);
// show facts
showfacts(response.data);
// update the total
total = response.total;
}
} catch (error) {
console.log(error.message);
} finally {
hideLoader();
}
};
De certa forma, uma desvantagem dessa implementação é a rapidez com que ela é executada. Você não verá o indicador de carregamento, na maioria das vezes, porque a API pode retornar muito rapidamente. Se você quiser ver o indicador de carregamento a cada rolagem, um setTimeout função pode ser usada. Ajustando o delay do seu setTimeout A função decidirá por quanto tempo o indicador de carregamento será exibido.
9. Lidar com eventos de rolagem
Quando o usuário rola para a parte inferior da página, um scroll event handler é necessário ligar para o loadFacts função. A função será chamada se todas as seguintes condições forem atendidas:
- a rolagem chegou ao final da página
- há mais fatos para carregar
Para obter o evento scroll, usaremos três propriedades da janela:
-
window.scrollHeightdá a altura de todo o documento -
window.scrollYdá conta de quanto o documento foi rolado pelo usuário. -
window.innerHeightdá a altura da janela que é visível
O diagrama abaixo fornece uma visão geral melhor das propriedades acima. Também você poderá entender que, se a soma de innerHeight e scrollY são iguais ou maiores que scrollHeighto final do documento é alcançado e é quando mais curiosidades devem ser carregadas.
window.addEventListener('scroll', () => {
const {
scrollTop,
scrollHeight,
clientHeight
} = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 5 &&
hasMoreFacts(currentPage, limit, total)) {
currentPage++;
loadFacts(currentPage, limit);
}
}, {
passive: true
});
10. Inicializar a página
A última etapa em nossa rolagem infinita seria inicializar a página. É importante ligar loadFactspara carregar o primeiro conjunto de curiosidades.
loadfacts(currentPage, limit);
Demonstração ao vivo
Conclusão
Agora, implementamos um Scroll Infinito simples em Javascript, que irá buscar e renderizar curiosidades sobre gatos, sempre que o usuário rolar. Este é apenas um dos métodos mais comumente usados para rolagem infinita.
