Implementar desplazamiento virtual eficiente con Vue.js

Introducción

En este proyecto, aprenderás cómo implementar una lista de desplazamiento virtual utilizando Vue.js. El desplazamiento virtual es una técnica que solo renderiza el área visible de un gran conjunto de datos, en lugar de renderizar o renderizar parcialmente los datos en el área no visible. Esto logra un rendimiento de renderizado extremadamente alto y es adecuado para renderizar una gran cantidad de datos con un volumen pequeño.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo cargar y renderizar datos de forma asíncrona utilizando la biblioteca axios
• Cómo implementar la funcionalidad de desplazamiento virtual para renderizar solo los elementos de la lista visibles
• Cómo calcular los índices de inicio y fin de los elementos de la lista visibles en función de la posición actual de desplazamiento
• Cómo optimizar el rendimiento de renderizado utilizando un buffer para renderizar elementos de lista adicionales fuera del área visible

🏆 Logros

Después de completar este proyecto, podrás:

• Implementar la funcionalidad de desplazamiento virtual para mejorar el rendimiento de renderizado
• Cargar y renderizar datos de forma asíncrona en un componente de Vue.js
• Calcular los elementos de la lista visibles en función de la posición actual de desplazamiento
• Utilizar un buffer para evitar una pantalla en blanco durante el desplazamiento

Configurar la estructura del proyecto

En este paso, aprenderás sobre la estructura del proyecto y los archivos involucrados en la funcionalidad de inicio de sesión.

La estructura del directorio del proyecto es la siguiente:

El código inicial para esta pregunta ya se ha proporcionado. Abre el entorno de codificación, y la estructura del directorio es la siguiente:

├── js
│   ├── axios.min.js
│   ├── http-vue-loader.js
│   └── vue.min.js
├── data.json
├── index.html
└── virtual-scroll-list.vue

Donde:

• js/axios.min.js es el archivo de la biblioteca de solicitudes axios.
• js/vue.min.js y js/http-vue-loader.js son archivos relacionados con la biblioteca Vue.js.
• data.json es el archivo de datos a solicitar.
• index.html es la página principal.
• virtual-scroll-list.vue es el archivo de componente que se debe completar.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la máquina virtual y actualízala manualmente y verás la página. El efecto inicial es una caja de lista vacía.

Carga y renderizado de datos asíncronos

En este paso, aprenderás cómo cargar y renderizar datos de forma asíncrona utilizando la biblioteca axios.

1. Abre el archivo virtual-scroll-list.vue.
2. En el hook de ciclo de vida mounted(), utiliza axios para realizar una solicitud al archivo data.json y llenar los datos de list:

mounted() {
  // TODO: Completion of data requests
  axios("./data.json").then((res) => {
    this.list = res.data;
    this.totalHeight = this.list.length * this.itemHeight; // calculate the total height
  });
}

Esto obtendrá los datos del archivo data.json y los almacenará en la propiedad de datos list. La propiedad totalHeight también se calcula en función de la longitud de list y itemHeight.

Después de completar este paso, la lista inicial debe renderizarse con los datos cargados del archivo data.json.

Implementación del desplazamiento virtual

En este paso, aprenderás cómo implementar la funcionalidad de desplazamiento virtual.

1. Abre el archivo virtual-scroll-list.vue.
2. Implementa el controlador de eventos scroll:

methods: {
  scroll(e) {
    this.start = Math.floor(e.currentTarget.scrollTop / this.itemHeight);
  },
}

El controlador de eventos scroll calcula el índice start de los elementos de la lista visibles en función de la posición actual de desplazamiento.

Después de completar este paso, la funcionalidad de desplazamiento virtual debe estar implementada, y los elementos de la lista solo deben renderizarse cuando son visibles en el área de visualización. El efecto final se muestra en la siguiente figura.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.