Como implementar um botão “Carregar mais” com Vanilla JavaScript

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.

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”.

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.

3. Adicionando funcionalidades com JavaScript

É assim que a implementação funcional do botão carregar mais será:

  1. Defina um número de cartões a serem adicionados à página cada vez que o usuário clicar no botão.
  2. Detecte quando o número total de cartões foi adicionado e desative o botão.

Definindo Constantes

Primeiro, pegue todos os elementos que vamos precisar do nosso DOM:

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.

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;

Em seguida, definiremos uma variável para quantos cartões queremos aumentar a página:

Muito parecido com o nosso tutorial de rolagem infinita, queremos saber quantas “páginas” teremos, ou seja, quantas vezes podemos aumentar o conteúdo até atingirmos 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.

Em seguida, definiremos um valor para determinar em qual página estamos:

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.

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:

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:

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:

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.

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:

Vamos então passar essa nova função para o nosso addCards função:

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.

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.

Conclusão

E terminamos! Implementamos com sucesso um recurso de botão “Carregar mais” em nossa página da web!

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

catorze − onze =

- Ana Pereira -spot_img

Últimos Artigos