Como implementar a rolagem infinita no Vue

A rolagem infinita é útil quando você precisa exibir grandes conjuntos de dados em seu aplicativo. Aprenda como implementá-lo em Vue.

A rolagem infinita é uma técnica que você pode usar para exibir mais conteúdo à medida que o usuário do aplicativo rola a página para baixo. Elimina a necessidade de paginação e permite que os usuários do aplicativo continuem navegando por grandes conjuntos de dados.

Configurando seu aplicativo Vue

Para acompanhar este tutorial, você precisa de um conhecimento básico de Vue 3 e JavaScript. Você deve saber como lidar com solicitações HTTP com Axios.

Para começar a aprender como implementar a rolagem infinita, crie um novo aplicativo Vue executando o seguinte comando npm no diretório de sua preferência:

npm create vue

Durante a configuração do projeto, o Vue solicitará que você selecione uma predefinição para seu aplicativo. Escolha Não para todos os recursos, pois você não precisará de nenhuma adição ao seu aplicativo.

Depois de criar o novo aplicativo, navegue até o diretório do aplicativo e execute o seguinte comando npm para instalar os pacotes necessários:

npm install axios @iconify/vue @vueuse/core

O comando npm instala três pacotes: axios (para solicitações HTTP), @iconify/vue (para fácil integração de ícones no Vue) e @iconify/vue (para fácil integração de ícones no Vue).@vueuse/core (oferecendo utilitários Vue essenciais).

Você usará axios e @iconify/vue para buscar dados e adicionar ícones ao seu aplicativo. @vueuse/core contém utilitários Vue, incluindo o componente useInfiniteScroll para obter rolagem infinita.

Buscando dados fictícios da API JSONPlaceholder

Para implementar a função de rolagem infinita, você precisa de dados. Você pode codificar esses dados ou obter dados de uma fonte de API falsa gratuita, como JSONPlaceholder.

Obter esses dados do JSONPlaceholder imita cenários da vida real, já que a maioria dos aplicativos da web obtém dados de bancos de dados em vez de dados codificados.

Para buscar dados da API para seu aplicativo Vue, crie uma nova pasta em seu diretório src e nomeie-a como api. Nessa pasta, crie um novo arquivo JavaScript e cole o seguinte código:

//getComments.js
import axios from "axios";
async function getComments(max, omit) {
  try {
    const comments = await axios.get(
      `https://jsonplaceholder.typicode.com/comments?_limit=${max}&_start=${omit}`
    );
    return comments.data.map((comment) => comment.body);
  } catch (error) {
    console.error(error);
  }
}
export default getComments;

O snippet de código consiste em uma função assíncrona para obter comentários do endpoint da API "https://jsonplaceholder.typicode.com/comments". Em seguida, exporta a função.

Para explicar melhor, o trecho de código começa com a importação da biblioteca axios. O código então define a função getComments com dois argumentos: max e omit.

A função getComments abriga o método axios.get() que faz uma solicitação GET para a URL. O URL contém parâmetros de consulta max e omit, que são interpolados na string usando literais de modelo (``). Isso permite que você passe valores dinâmicos para o URL.

A função então retorna um novo array que consiste no corpo dos comentários recebidos do endpoint da API usando a função map.

Se ocorrer algum erro, o snippet de código o registra no console. O trecho de código exporta essa função para outras partes do seu aplicativo.

Criando o componente de rolagem infinita

Agora que você administrou a lógica para buscar dados fictícios, pode criar um novo componente para exibir os dados fictícios e manipular a função de rolagem infinita.

Crie um novo arquivo InfiniteScroll.vue no diretório src/components e adicione o seguinte código:

<!-- InfiniteScroll.vue -->
<script setup>
import { ref } from "vue";
import getComments from "../api/getComments";
import { useInfiniteScroll } from "@vueuse/core";
const listEl = ref(null);
const commentsDisplayed = 20;
const commentsList = ref(await getComments(commentsDisplayed, 0));
const commentsToDisplayOnScroll = async () => {
  const newComments = await getComments(
    commentsDisplayed,
    commentsList.value.length
  );
  commentsList.value.push(...newComments);
};
useInfiniteScroll(
  listEl,
  async () => {
    await commentsToDisplayOnScroll();
  },
  { distance: 10 }
);
</script>

O trecho de código acima descreve o bloco de script do componente InfiniteScroll.

O trecho de código importa as funções ref e useInfiniteScroll de vue e @vueuse/core, respectivamente. O snippet também importa a função getComments do arquivo getComments.js.

Em seguida, o snippet cria uma referência listEl com a função ref. listEl faz referência ao elemento DOM com a funcionalidade de rolagem infinita.

A variável commentsDisplayed representa o número de comentários a serem exibidos inicialmente na página. commentsList contém a matriz de comentários que o trecho de código busca com a função getComments.

O snippet define uma função assíncrona commentsToDisplayOnScroll que busca novos comentários com a função getComments e os anexa ao array commentsList existente com o operador spread (< forte>...).

Por fim, o trecho de código invoca a função useInfiniteScroll para ativar o comportamento de rolagem infinita, considerando três argumentos:

• A referência do elemento DOM (listEl) representa a lista pela qual o usuário do aplicativo irá rolar.
• Uma chamada de função assíncrona quando o usuário rola para acionar a busca de novos comentários e anexá-los à commentsList.
• Um objeto de configuração opcional com propriedades. O objeto { distance: 10 } especifica que os novos comentários devem começar a carregar quando o usuário estiver a 10 pixels do final da lista.

Usando o componente de rolagem infinita

Depois de lidar com a lógica de rolagem infinita no bloco de script do componente InfiniteScroll, você precisa renderizar o conteúdo no bloco de modelo.

Cole o seguinte bloco de código em seu componente InfiniteScroll:

<!-- InfiniteScroll.vue -->
<template>
  <div>
    <ul ref="listEl">
      <li v-for="comment in commentsList">
        {{ comment }}
      </li>
    </ul>
  </div>
</template>

Este bloco de código define o modelo para um componente Vue responsável por renderizar uma lista de comentários.

O elemento

contém uma coleção de elementos
• gerados com a diretiva v-for (para renderizar listas), que itera sobre commentsList matriz.

  Cada comentário da matriz é exibido dentro de um elemento

• usando interpolação de dados ({{ comment }}). O bloco de código atribui a referência listEl ao
  para ativar a função de rolagem infinita.

  Então, você pode usar o componente InfiniteScroll em seu arquivo App.vue.

  <!-- App.vue -->
  <script setup>
  import InfiniteScroll from "./components/InfiniteScroll.vue";
  import { Icon } from "@iconify/vue";
  </script>
  <template>
    <Suspense>
      <InfiniteScroll />
      <template #fallback>
        <Icon icon="eos-icons:bubble-loading" width="250" height="250" />
      </template>
    </Suspense>
  </template>
  

  O bloco de código acima importa o componente InfiniteScroll e o componente Icon. Em seguida, ele envolve o componente InfiniteScroll em um componente Suspense.

  O componente Suspense permite renderizar conteúdo substituto (um ícone) enquanto o Vue resolve todas as funções assíncronas no componente InfiniteScroll.

  Agora você pode visualizar seu aplicativo executando o comando npm run dev no diretório do aplicativo. Você deverá ver uma interface semelhante à imagem abaixo:

  

  A visualização acima exibe dez comentários conforme você define a variável commentsToBeDisplayed como 10. À medida que você rola para baixo, o aplicativo carrega mais comentários para ler.

  A técnica de rolagem infinita é popular entre aplicativos da web, especialmente em aplicativos de mídia social como X e Tiktok.

  Essa técnica garante que os usuários do aplicativo permaneçam engajados à medida que ele busca continuamente mais dados, fornecendo-lhes um fluxo cada vez maior de conteúdo para ler, aprender e assistir, mantendo assim o interesse despertado.

  Aprenda a reutilizar componentes Vue com slots

  Você aprendeu como implementar a técnica de rolagem infinita com o componente useInfiniteScroll disponível para VueUse.

  Nos sites modernos, é comum renderizar os mesmos componentes com conteúdos HTML diferentes. Você pode aprender a reutilizar componentes Vue para obter essa sensação consistente em diferentes partes de um aplicativo web.