Um botão “Carregar mais” adiciona mais conteúdo a uma página quando clicado por um usuário. Essa é uma abordagem comum para blogs, pois permite que o usuário decida como e quando as informações são exibidas.
Aqui está uma olhada no produto final em que trabalharemos hoje – role até a parte inferior da caneta e clique no botão para adicionar mais conteúdo à página:
1. Recipiente de cartão e HTML de botão
Começaremos colocando o recipiente para nossos cartões na página. Adicionaremos os cartões ao contêiner usando JavaScript para que o div fique vazio.
Nossa implementação inclui um botão “carregar mais” e também exibe o número atual de cartões sendo exibidos e o número total de cartões disponíveis. Incluiremos esses recursos em um card-actions div. O conteúdo em card-count e card-total será adicionado com JavaScript.
Showing of cards
2. Estilizando os cartões e o botão
Os cartões que adicionaremos ao div do contêiner de cartão terão um nome de classe de “card”.
#card-container {
display: flex;
flex-wrap: wrap;
}
.card {
height: 55vh;
width: calc((100% / 3) - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.card:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
Vamos estilizar nosso load-more botão de maneira semelhante aos cartões e adicione um pseudo-seletor desabilitado para mostrar quando o final dos cartões foi atingido.
.card-actions {
margin: 8px;
padding: 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#load-more {
width: calc((100% / 3) - 8px);
padding: 16px;
background-color: white;
border: none;
cursor: pointer;
transition: all 200ms ease-in-out;
border-radius: 3px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
}
#load-more:not([disabled]):hover {
box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
}
#load-more[disabled] {
background-color: #eaeaea !important;
}
3. Adicionando funcionalidades com JavaScript
É assim que a implementação funcional do botão carregar mais será:
- Defina um número de cartões a serem adicionados à página cada vez que o usuário clicar no botão.
- Detecte quando o número total de cartões foi adicionado e desative o botão.
Definindo Constantes
Primeiro, pegue todos os elementos que precisaremos do nosso DOM:
const cardContainer = document.getElementById("card-container");
const loadMoreButton = document.getElementById("load-more");
const cardCountElem = document.getElementById("card-count");
const cardTotalElem = document.getElementById("card-total");
Agora precisamos definir nossas variáveis globais.
Precisaremos de um valor para o número máximo de cartões a serem adicionados à página. Se você estiver obtendo seus dados de um servidor, esse valor será o comprimento da resposta do servidor. Vamos inicializar um limite de cartão de 99.
const cardLimit = 99;
o cardTotalElem é o elemento para exibir o número máximo de cartões na página para que possamos definir o innerHTML para o cardLimit valor;
cardTotalElem.innerHTML = cardLimit;
Em seguida, definiremos uma variável para quantos cartões queremos aumentar a página:
const cardIncrease = 9;
Assim como em nosso tutorial de rolagem infinita, queremos saber quantas “páginas” teremos, ou seja, quantas vezes podemos aumentar o conteúdo até atingir o limite máximo. Por exemplo, com nosso definido cardLimit e cardIncrease variáveis, podemos aumentar o conteúdo 10 vezes (assumindo que já carregamos os primeiros 9 elementos) até atingirmos o limite. Faremos isso dividindo o cardLimit pelo cardIncrease.
const pageCount = Math.ceil(cardLimit / cardIncrease);
Em seguida, definiremos um valor para determinar em qual página estamos:
let currentPage = 1;
Criando um novo cartão
Agora que temos todas as nossas constantes, vamos fazer uma função para adicionar um novo cartão ao container de cartões. Vamos definir o innerHTML dos nossos cartões ao valor do índice para que possamos acompanhar o número de cartões que estamos adicionando.
Um recurso divertido nesta demonstração é que cada cartão tem uma cor de fundo gerada aleatoriamente.
const getRandomColor = () => {
const h = Math.floor(Math.random() * 360);
return `hsl(${h}deg, 90%, 85%)`;
};
const createCard = (index) => {
const card = document.createElement("div");
card.className = "card";
card.innerHTML = index;
card.style.backgroundColor = getRandomColor();
cardContainer.appendChild(card);
};
Também podemos aplicar esta função ao nosso load-more botão no carregamento da página para dar uma cor de fundo aleatória também:
window.onload = function () {
loadMoreButton.style.backgroundColor = getRandomColor();
};
Adicionando cartões ao contêiner
Adicionaremos nossos cartões ao nosso contêiner usando uma funcionalidade semelhante à que usamos no tutorial Rolagem infinita.
Primeiro, determine o intervalo de cartões a serem adicionados à página. o addCards função aceitará um pageIndex parâmetro, que irá atualizar o global currentPage valor. Se estivermos na página 1, adicionaremos os cartões de 1 a 9. Se estivermos na página 2, adicionaremos os cartões de 10 a 18 e assim por diante.
Podemos definir isso matematicamente como:
const addCards = (pageIndex) => {
currentPage = pageIndex;
const startRange = (pageIndex - 1) * cardIncrease;
const endRange = pageIndex * cardIncrease;
for (let i = startRange + 1; i <= endRange; i++) {
createCard(i);
}
};
Nesta função, nosso intervalo inicial será sempre um a menos que o valor que estamos tentando obter (ou seja, na página 1, o intervalo inicial é 0, na página 2, o intervalo inicial é 9), portanto, consideraremos isso definindo o valor do nosso índice de loop for para startRange + 1.
Detectando quando o limite do cartão é atingido
Um limite que teremos que observar é o endRange número. Se estivermos na última página, queremos que nosso intervalo final seja o mesmo que o cardLimit. Por exemplo, se tivermos um cardLimit de 75 e um cardIncrease de 10 e estamos na página 8, nosso startRange será de 70 e nosso endRange valor deve ser 75.
Vamos modificar nosso addCards função para dar conta disso:
const addCards = (pageIndex) => {
currentPage = pageIndex;
const startRange = (pageIndex - 1) * cardIncrease;
const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
for (let i = startRange + 1; i <= endRange; i++) {
createCard(i);
}
};
Nossa demonstração também inclui um cardTotal elemento que exibe o número de cartões que estão sendo mostrados na página, então definiremos o innerHTML deste elemento como o intervalo final.
const addCards = (pageIndex) => {
currentPage = pageIndex;
const startRange = (pageIndex - 1) * cardIncrease;
const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
cardCountElem.innerHTML = endRange;
for (let i = startRange + 1; i <= endRange; i++) {
createCard(i);
}
};
Outra coisa a observar é desabilitar o botão carregar mais quando o cardLimit é atingido. Podemos definir um handleButtonStatus função para determinar se o botão deve ser desativado, ou seja, quando o currentPage é igual a cardLimit:
const handleButtonStatus = () => {
if (pageCount === currentPage) {
loadMoreButton.classList.add("disabled");
loadMoreButton.setAttribute("disabled", true);
}
};
Vamos então passar essa nova função para o nosso addCards função:
const addCards = (pageIndex) => {
currentPage = pageIndex;
handleButtonStatus();
const startRange = (pageIndex - 1) * cardIncrease;
const endRange =
pageIndex * cardIncrease > cardLimit ? cardLimit : pageIndex * cardIncrease;
cardCountElem.innerHTML = endRange;
for (let i = startRange + 1; i <= endRange; i++) {
createCard(i);
}
};
Carregando cartões iniciais
Definimos um recurso para adicionar cartões ao contêiner, então atualizaremos nosso window.onload função para definir os cartões iniciais a serem adicionados à página.
window.onload = function () {
addCards(currentPage);
loadMoreButton.style.backgroundColor = getRandomColor();
};
Manipulando Carga Mais
Cuidaremos da adição do conteúdo aumentando o currentPage número por 1 cada vez que o Carregue mais botão é clicado. Como já adicionamos todas as verificações de limite em nosso addCards função, não precisaremos fazer nenhuma outra verificação em nosso evento de clique.
window.onload = function () {
addCards(currentPage);
loadMoreButton.style.backgroundColor = getRandomColor();
loadMoreButton.addEventListener("click", () => {
addCards(currentPage + 1);
});
};
Conclusão
E terminamos! Implementamos com sucesso um recurso de botão “Carregar mais” em nossa página da web!
