A rolagem infinita é útil quando você precisa exibir grandes conjuntos de dados em seu aplicativo. Aprenda como implementá-lo no 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. Ele 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 Solicitações HTTP com Axios.
Para começar a aprender a implementar rolagem infinita, crie um novo aplicativo Vue executando o seguinte npm comando em seu diretório preferido:
npm create vue
Durante a configuração do projeto, o Vue solicitará que você selecione uma predefinição para seu aplicativo. Escolher 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 npm comando para instalar os pacotes necessários:
npm install axios @iconify/vue @vueuse/core
O npm comando instala três pacotes: axios (para solicitações HTTP), @iconify/vue (para facilitar a integração de ícones no Vue), e @vueuse/core (oferecendo utilitários Vue essenciais).
você vai usar axios e @iconify/vue para buscar dados e adicionar ícones ao seu aplicativo. @vueuse/core contém utilitários Vue, incluindo o useInfiniteScroll componente 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 origem diretório e nomeá-lo api. Nessa pasta, crie um novo arquivo JavaScript e cole o seguinte código:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(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);
}
}
exportdefault 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 snippet de código começa com a importação do axios biblioteca. O código então define o getComentários função com dois argumentos: máximo e omitir.
O getComentários função abriga o axios.get() método que faz uma solicitação GET para a URL. A URL contém parâmetros de consulta máximo e omitir, que são interpolados na string usando literais de modelo (``). Isso permite que você passe valores dinâmicos para a URL.
A função então retorna uma nova matriz consistindo no corpo dos comentários recebidos do terminal da API usando o mapa função.
Se ocorrer algum erro, o trecho de código o registra no console. O trecho de código exporta essa função para outras partes do seu aplicativo.
Agora que você tratou da 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.
Criar um novo arquivo InfiniteScroll.vue no origem/componentes diretório e adicione o seguinte código:
