Home-theater-designers
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.
MUO Vídeo do dia ROLE PARA CONTINUAR COM O CONTEÚDO
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 como 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:
iphone 12 pro max vs pro
npm install axios @iconify/vue @vueuse/core
O npm comando instala três pacotes: eixos (para solicitações HTTP), @iconify/vue (para fácil integração de ícones no Vue) , e @visualizar/núcleo (oferecendo utilitários Vue essenciais).
Você vai usar eixos e @iconify/vue para buscar dados e adicionar ícones ao seu aplicativo. @visualizar/núcleo 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 e 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 fonte diretório e nomeie-o 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 do eixos biblioteca. O código então define o obter comentários função com dois argumentos: máximo e omitir .
O obter comentários função abriga o axios.get() método que faz uma solicitação GET para a URL. O 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 o URL.
A função então retorna um novo array que consiste no corpo dos comentários recebidos do endpoint da API usando o mapa função.
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 origem/componentes diretório 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 Rolagem infinita componente.
O trecho de código importa o ref e useInfiniteScroll funções de visualizar e @visualizar/núcleo , respectivamente. O snippet também importa o obter comentários função do getComments.js arquivo.
Em seguida, o trecho cria um listel referência com o ref função. listel faz referência ao elemento DOM com a funcionalidade de rolagem infinita.
O comentáriosExibidos variável representa o número de comentários a serem exibidos inicialmente na página. lista de comentários contém a matriz de comentários que o trecho de código busca com o obter comentários função.
O trecho define um comentáriosToDisplayOnScroll função assíncrona que busca novos comentários com o obter comentários função e os anexa ao existente lista de comentários array com o operador spread ( ... ).
Finalmente, o trecho de código invoca o useInfiniteScroll função para ativar o comportamento de rolagem infinita usando três argumentos:
- O elemento DOM ( listel ) a referência representa a lista pela qual o usuário do aplicativo percorrerá.
- Uma chamada de função assíncrona quando o usuário rola para acionar a busca de novos comentários e anexá-los ao lista de comentários .
- Um objeto de configuração opcional com propriedades. O objeto {distância: 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 Rolagem infinita componente, você precisa renderizar o conteúdo no bloco de modelo.
Cole o seguinte bloco de código em seu Rolagem infinita componente:
<!-- 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.
por que meu espaço em disco é 100
O elemento contém uma coleção de
Cada comentário da matriz é exibido dentro de um para habilitar a função de rolagem infinita.
Então, você pode usar o Rolagem infinita componente em seu app.vue arquivo.
<!-- 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 Rolagem infinita Componente e o Ícone componente. Em seguida, envolve o Rolagem infinita componente em um suspense componente.
O suspense O componente permite que você renderize o conteúdo de fallback (um ícone) enquanto o Vue resolve todas as funções assíncronas no Rolagem infinita componente.
Agora, você pode visualizar seu aplicativo executando o comando npm run dev no diretório do aplicativo. Você deve ver uma interface semelhante à imagem abaixo:
A visualização acima exibe dez comentários à medida que você define o comentáriosToBeDisplayed variável para 10. Conforme você rola para baixo, o aplicativo carrega mais comentários para ler.
A técnica de rolagem infinita é popular entre os aplicativos da web, principalmente em aplicativos de mídia social como X e Tiktok.
Essa técnica garante que os usuários do aplicativo permaneçam engajados, pois ele busca continuamente mais dados, fornecendo a eles um fluxo cada vez maior de conteúdo para ler, aprender e assistir, mantendo assim seu 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údo HTML diferente. Você pode aprender a reutilizar componentes Vue para obter essa sensação consistente em diferentes partes de um aplicativo da web.