Como implementar a rolagem infinita no Vue

A rolagem infinita, ou design “sem página”, é uma abordagem avançada que permite a apresentação contínua de informações adicionais à medida que o usuário navega progressivamente por uma página da web. Dispensando a paginação tradicional, esse método acomoda a exploração de extensos conjuntos de dados sem interrupção, oferecendo uma experiência de navegação suave e ininterrupta.

Configurando seu aplicativo Vue

Para navegar com sucesso por este tutorial, é essencial que você possua uma compreensão elementar do Vue 3 e sua linguagem de programação subjacente, JavaScript. Além disso, é necessária familiaridade com o tratamento de solicitações HTTP usando Axios.

Para iniciar o processo de domínio da implementação de rolagem infinita em um aplicativo Vue, execute o seguinte comando npm no espaço de trabalho desejado:

 npm create vue

Ao iniciar o processo de configuração do projeto, o Vue perguntará sobre a seleção de um modelo de aplicativo. Recomenda-se que nenhuma funcionalidade adicional seja selecionada, pois elas são desnecessárias para a tarefa atual em questão.

Depois de estabelecer um novo aplicativo, vá para sua pasta e execute o seguinte processo de instalação do npm para adquirir os módulos necessários:

 npm install axios @iconify/vue @vueuse/core

Ao executar o processo de instalação do npm, resulta na incorporação de três pacotes distintos, especificamente o Axios para facilitar as transações HTTP,

Utilizando Axios e “@iconify/vue”, este aplicativo recupera dados enquanto incorpora iconografia através das referidas bibliotecas. O pacote “@vueuse/core” oferece uma gama de módulos utilitários Vue, entre eles “useInfiniteScroll” que facilita a funcionalidade de rolagem infinita dentro da interface.

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.

A recuperação de informações de JSONPlaceholder imita situações reais, como costuma ser o caso de plataformas baseadas na Web para obter dados de bancos de dados em vez de depender de valores explicitamente definidos.

Para recuperar informações de uma Application Programming Interface (API) dentro de um projeto Vue, estabeleça um novo diretório sob o guarda-chuva “src” e designe-o como “api”. Dentro deste diretório recém-criado, inicie um novo documento JavaScript e insira o seguinte script algorítmico:

 //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 trecho de código fornecido apresenta uma função que recupera comentários do ponto de extremidade da API JSONPlaceholder “ https://jsonplaceholder.typicode.com/comments ”. Essa operação assíncrona é seguida pela exportação da função, que permite que outras partes do aplicativo utilizem sua funcionalidade.

Para fornecer informações adicionais, o texto fornecido refere-se a um exemplo de programação que utiliza a biblioteca Axios para buscar dados de uma fonte externa. Especificamente, descreve a implementação de uma função chamada “getComments” que aceita dois parâmetros, a saber “max” e “omit”. Esses parâmetros são componentes integrais da funcionalidade da função, permitindo que ela execute sua operação pretendida dentro do programa ou aplicativo maior no qual está incorporada.

A função getComments incorpora o método axios.get(), que é utilizado para transmitir uma solicitação GET para uma URL designada contendo parâmetros de consulta especificados como max e omit. Esses parâmetros são integrados à URL por meio do emprego de literais de modelo entre crases (), facilitando assim a inserção de valores que variam dinamicamente na URL.

O método subsequentemente constrói novamente um arranjo, englobando o corpus, de respostas obtidas via endpoint da API por meio da operação de mapeamento.

Caso um erro seja detectado, o fragmento de código registrará o problema no console para inspeção adicional. Em seguida, o segmento de código exportará esta função para várias seções do seu programa para utilização em outras áreas.

Criando o componente de rolagem infinita

Considerando sua proficiência em lidar com operações lógicas relacionadas à recuperação de dados, você pode agora construir um novo elemento que exiba os dados adquiridos e gerencie o recurso de rolagem perpétua.

Para criar um novo componente Vue, chamado “InfiniteScroll”, dentro da pasta “src/components” do seu projeto, você pode seguir os seguintes passos:1. Navegue até o diretório raiz do seu projeto usando seu explorador de arquivos preferido ou interface de linha de comando.2. Localize a pasta “src” e expanda-a se necessário.3. Procure uma pasta “components” existente dentro do diretório “src” e crie uma se ela não existir.4. Dentro da pasta “components” recém-criada ou existente, crie outra pasta chamada “InfiniteScroll”.5. Abra a pasta “InfiniteScroll” usando seu editor de texto ou ambiente de desenvolvimento integrado (IDE) e insira o trecho de código fornecido como content.6. Salve as alterações feitas no arquivo clicando no botão apropriado

 <!-- 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 fragmento de código acima mencionado delineia o bloco de script associado ao componente InfiniteScroll, detalhando sua implementação e funcionalidade dentro do contexto de desenvolvimento web.

O trecho de código importa duas funções, ref e useInfiniteScroll , da biblioteca Vue, bem como @vueuse/core. Além disso, ele importa a função getComments de um arquivo separado chamado getComments.js.

O código então gera uma lista não ordenada usando a função ref referenciando um elemento DOM que recebeu a funcionalidade de rolagem infinita por meio da variável listRef.

A variável commentsDisplayed significa a quantidade predefinida de entradas de comentários que são exibidas inicialmente na página da web. Correspondentemente, o componente commentsList contém uma coleção ordenada de comentários obtidos por meio da função getComments.

O código fornecido introduz um mecanismo de recuperação de comentários, utilizando uma função assíncrona chamada commentsToDisplayOnScroll , que emprega a função getComments para adquirir comentários adicionais e anexá-los ao array commentsList preexistente usando a sintaxe de propagação ( ... ).

Por fim, o trecho de código fornecido ativa a funcionalidade de rolagem infinita utilizando a função useInfiniteScroll com três parâmetros:

O elemento DOM, designado como “listEl”, serve como referência à lista pela qual os usuários do aplicativo navegarão por meio de rolagem.

À medida que o usuário rola, uma função assíncrona é acionada para recuperar e anexar novos comentários à commentsList.

Um objeto de configuração opcional, caracterizado por suas várias propriedades, pode ser utilizado para ditar que a exibição do próximo comentário comece assim que um usuário tiver percorrido um deslocamento horizontal de dez pixels em relação ao ponto final do rolo de comentário atual.

Usando o componente de rolagem infinita

Depois de implementar a funcionalidade de rolagem infinita na seção de script do componente InfiniteScroll, é necessário exibir o conteúdo relevante na área de modelo da estrutura HTML do componente.

Incorpore o seguinte trecho de código no componente “InfiniteScroll”:

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

O segmento de código atual constitui o projeto de um componente Vue.js, ao qual é confiada a tarefa de visualizar uma matriz de itens de comentários de maneira amigável.

O elemento serve para abranger um grupo de componentes , cada um dos quais é criado utilizando a diretiva v-for para geração de lista. Essa diretiva itera na matriz commentsList para criar os itens individuais dentro da lista.

Os comentários são apresentados em um elemento de item de lista, com cada iteração do loop sendo denotada pela interpolação de dados dentro da tag HTML correspondente ({{ comentário }}). Além disso, a referência do elemento da lista não ordenada é atribuída ao elemento ul para implementar a funcionalidade de rolagem infinita.

Para utilizar a funcionalidade do componente InfiniteScroll em seu aplicativo, é recomendável integrá-lo ao arquivo App.vue principal. Isso permite uma incorporação perfeita e garante que o mecanismo de carregamento baseado em rolagem seja aplicado de forma consistente em toda a interface do usuário.

 <!-- 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 código fornecido importa dois componentes React, chamados InfiniteScroll e Icon , que são utilizados dentro de um componente Suspense para gerenciar a renderização assíncrona de conteúdo.

O componente Suspense permite a exibição de um espaço reservado, como um ícone, enquanto aguarda a resolução de operações assíncronas dentro do componente InfiniteScroll. Isso é feito por meio do uso da capacidade do Vue de lidar com a conclusão de todas as tarefas assíncronas pendentes antes de renderizar a saída final.

Agora você pode dar uma olhada em seu aplicativo executando o comando “npm run dev” dentro do diretório do projeto. A aparência deve se parecer com a ilustração abaixo:

À medida que você navega pelo conteúdo abaixo, o aplicativo recupera dinamicamente comentários adicionais com base no seu progresso em ordem decrescente de curtidas recebidas.

A utilização da técnica de rolagem infinita ganhou destaque em uma variedade de aplicativos baseados na web, principalmente aqueles encontrados em plataformas de mídia social como X e TikTok.

A utilização desse método mantém o envolvimento do usuário, recuperando continuamente informações adicionais, oferecendo assim um fluxo contínuo de material para leitura, educação e visualização, sustentando sua curiosidade e interesse.

Aprenda a reutilizar componentes Vue com slots

Você ganhou proficiência na implementação do método de rolagem infinita utilizando o componente useInfiniteScroll do VueUse.

No desenvolvimento de sites contemporâneos, é comum exibir componentes idênticos usando conteúdo HTML distinto. Ao dominar a arte de reutilizar componentes Vue, pode-se efetivamente manter uma aparência uniforme em várias seções de um aplicativo da web.