Introdução
Neste projeto, você aprenderá como implementar uma lista de rolagem virtual usando Vue.js. A rolagem virtual é uma técnica que renderiza apenas a área visível de um grande conjunto de dados, em vez de renderizar ou renderizar parcialmente os dados na área não visível. Isso alcança um desempenho de renderização extremamente alto e é adequado para renderizar um grande número de dados com um volume pequeno.
👀 Pré-visualização
🎯 Tarefas
Neste projeto, você aprenderá:
- Como carregar e renderizar dados de forma assíncrona usando a biblioteca
axios - Como implementar a funcionalidade de rolagem virtual para renderizar apenas os itens da lista visíveis
- Como calcular os índices inicial e final dos itens da lista visíveis com base na posição atual da rolagem
- Como otimizar o desempenho da renderização usando um buffer para renderizar itens de lista adicionais fora da área visível
🏆 Conquistas
Após concluir este projeto, você será capaz de:
- Implementar a funcionalidade de rolagem virtual para melhorar o desempenho da renderização
- Carregar e renderizar dados de forma assíncrona em um componente Vue.js
- Calcular os itens da lista visíveis com base na posição atual da rolagem
- Usar um buffer para evitar uma tela branca durante a rolagem
