Rolagem infinita com Vue.js: um guia passo a passo

Aprenda como implementar rolagem infinita com Vue.js neste guia passo a passo. Com rolagem infinita, você pode manter seus usuários rolando e engajados com seu conteúdo.

Com uma rolagem infinita, a página da Web carrega o novo conteúdo à medida que o usuário rola a página, permitindo assim que o usuário veja o novo conteúdo sem precisar clicar em uma nova página ou atualizá-la. Esse recurso é especialmente útil quando você deseja carregar grandes quantidades de dados ou imagens à medida que o usuário precisa deles, e não todos de uma vez.

Ao longo dos anos, sites de redes sociais como Twitter, Facebook e Instagram popularizaram a rolagem infinita. Neste tutorial, implementaremos uma rolagem infinita usando Vue, uma estrutura JavaScript para criar interfaces de usuário e aplicativos de página única. Vamos começar!

Começando com o Vue

Vue é um framework leve com um DOM virtual; ele fornece uma maneira de renderizar dados declarativamente para o DOM e usa uma ligação de dados bidirecional para manter o DOM atualizado quando os dados são alterados.

O que eu realmente aprecio no Vue 3 é a compactação do código. Tudo, incluindo o script, HTML e estilo, tem seu próprio lugar esculpido em um único arquivo. Essa solução é ideal para os projetos mais simples, como o nosso, e é uma ótima opção para começar a mexer com uma ideia.

Descrição do Projeto

Em nossa aplicação, iremos implementar algumas funcionalidades que podem ser úteis em outros projetos. Faremos o download de dados de um gerador de dados online aleatório. Para este projeto, usaremos http://random-data-api.com , que oferece uma API útil e dados realistas para brincar, permitindo-nos ver como nosso aplicativo funcionaria em um cenário do mundo real.

Para cada novo lote de dados, uma mensagem curta aparecerá enquanto os novos dados estão sendo baixados no navegador. Essa é sempre uma boa prática, especialmente considerando a lentidão arbitrária que uma API pode responder. Portanto, o usuário estará ciente do fato de que algo está acontecendo sob o capô.

Para a grade que mostra os dados, usaremos um layout CSS de alvenaria. Neste projeto, usaremos um dos layouts CSS mais simples que pude encontrar. Você pode facilmente adaptá-lo para outras estruturas sem muito retrabalho.

A imagem abaixo mostra o resultado final:

A ideia do projeto é bastante simples; na primeira impressão da página, o primeiro lote de dados é baixado no navegador e visualizado. À medida que o usuário percorre o componente que visualiza os dados, um toque na parte inferior da página carrega um novo lote de dados. No final da visualização atual, os novos dados serão enviados para a interface do usuário e um novo espaço será disponibilizado para acomodá-los.

Para acompanhar, você pode encontrar o repositório de código completo para este projeto no GitHub . Na próxima seção, discutiremos as partes mais interessantes do código em detalhes.

masonrycomponente

Nosso objetivo é detectar quando o usuário chegou ao fundo do componente que contém os dados “infinitos”. No código-fonte, esse componente é chamadomasonry . Podemos fazer isso manipulando as três propriedades a seguir:

masonry.clientHeight: O número de pixels para toda a altura do masonryelemento
masonry.scrollTop: O número de pixels que já percorremos na lista de itens
window.scrollHeight: O número de pixels atualmente contidos na lista de itens

O código a seguir implementa essa ideia:

  mounted() {
    const masonry = document.querySelector('#infinite-list');
    document.title = "Ethrnal Scroll Demo";
    masonry.addEventListener('scroll', e =&amp;gt; {
      if (masonry.scrollTop + masonry.clientHeight &amp;gt;= masonry.scrollHeight) {
        this.getNextBatch(30);
      }
    })
  },
};

Na imagem abaixo, você pode visualizar como as três variáveis interagem. Quando scrollTop mais clientHeighté maior que scrollHeight, rolamos até o final da lista e precisamos de outro lote de itens:

Scrolltop Clientheight Scrollheight Demo Diagram

Na imagem abaixo, você pode ver como os valores mudam quando rolamos para o final do conteúdo:

Depois de limpar o mecanismo que verifica se chegamos ao final da lista, precisamos encontrar um bom lugar para adicionar essa verificação em nosso código. Um lugar natural é o scrollevento. Portanto, toda vez que rolarmos para frente e para trás, o masonrycomponente poderá controlar se chegamos ao final da lista ou não.

Outra coisa que vale a pena notar é que atribuímos o ouvinte para o evento scroll no mounted()método que o Vue nos fornece, permitindo-nos executar o código após a montagem do componente.

Antes de discutir mais sobre a rolagem, vamos dar uma olhada nos dados que nosso aplicativo irá manipular:

  data() {
    return {
      loading: false,
      items: [],
      page_count: 0,
      sizes: ["tall", "taller", "tallest"]
    };
  },

Em data(), temos o estado do componente. Vamos olhar mais de perto:

loading: Uma variável booleana que será truequando queremos que o Loading next batchrótulo seja exibido. Veja a linha 14 no App.vuearquivo
items[]: Uma matriz de objetos que conterá os dados exibidos
page_count: O número de lotes que baixamos da fonte aleatória
sizes[]: Uma matriz que contém os rótulos dos três estilos para os ladrilhos que descrevemos acima

grid-container {
      display: grid;
      /* 1 /
      grid-auto-rows: 50px;
      / 2 /
      grid-gap: 10px;
      / 3 /
      grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
      / 4 */
      overflow: auto;
      height: 30vh;
      border: 2px solid;
      border-radius: 5px;
      text-align: center;
      margin: 0 0 35px 0;
    }
    .tall {
      grid-row: span 2;
      background-color: #7632ed;
    }
    .taller {
      grid-row: span 3;
      background-color: #925cef;
    }
    .tallest {
      grid-row: span 4;
      background-color: #b9a3de;
    }

O código acima mostra o detalhe do CSS definido na <style>seção de App.vue, onde definimos os diferentes tiles do masonrycomponente. Os seletores, tall, tallere tallest são atribuídos aleatoriamente aos dados baixados:

getNextBatch(size) {
  this.loading = true;
  axios.get("https://random-data-api.com/api/v2/users?size=" + size + "&amp;amp;response_type=json").then((response) =&amp;gt; {
    response.data.map((x) =&amp;gt; {
      const new_item = {
        name: x.first_name + " " + x.last_name,
        dob: x.date_of_birth,
        location: x.address.state,
        size: this.sizes[Math.floor(Math.random() * this.sizes.length)]
      };
      this.items.push(new_item)
    })
    this.loading = false;
    this.page_count++;
  });
}

Implementamos o carregamento de um lote de dados da fonte aleatória no único método do aplicativo Vue, getNextBatch, exibido acima. Ele baixa um novo lote de itens da API de fonte de dados aleatórios com axios.get(), especificando o número de itens que queremos. Depois que os dados chegam, eles são manipulados para extrair alguns dos campos e montar um objeto que será anexado ao items[]array.

getNextBatch()também faz duas coisas simples. Por um lado, ele atualiza o número de páginas ou o número de lotes que baixamos e mostra e oculta o Loading next batchrótulo do App.vuearquivo.

Observe como reutilizamos o código. Também usamos getNextBatch()no beforeMount()método que é executado assim que a página é carregada, mas nenhum componente é exibido ainda. O efeito desta chamada é preencher o items[]array com alguns dados a serem visualizados no masonrycomponente.

Conclusão

Neste artigo, exploramos uma solução simplificada para implementar a rolagem infinita em uma página da Web escrita em Vue.

Para facilitar a reutilização em outros projetos, implementamos nossa funcionalidade de rolagem infinita em um arquivo <div>. As outras duas partes do nosso scroll infinito estão bem separadas no código, incluindo a função que baixa um novo lote de dados e onde chamamos essa função. Isso ajudará o desenvolvedor a substituir a URL da API na getNextBatch()função por algo mais útil.

O Vue3 em particular é extremamente eficaz para escrever uma pequena prova de conceito, como neste exemplo. Mas você também pode ampliá-lo combinando componentes para obter funções mais complexas. Espero que tenha gostado deste artigo

Fonte: https://blog.logrocket.com

#vue #vuejs