Vue3 implementa el desplazamiento virtual de listas.

Recientemente, en un proyecto de reproductor web, utilicé muchas listas que necesitaban mostrar listas de reproducción.

¿Una lista de reproducción contiene miles de canciones y hay demasiados elementos de página, lo que hace que Chrome se bloquee directamente?

Así que la lista de desplazamiento infinito se puso en la agenda.

Es un poco complicado, es la primera vez que escribo un proyecto usando texto mecanografiado. Por favor grábalo primero.

A diferencia de la carga diferida, el desplazamiento virtual necesita obtener todos los datos a la vez, pero solo muestra los datos dentro del rango visible de la pantalla.

Para esto, necesito saber:

Suponiendo que la pantalla completa puede acomodar 10 datos, entonces los datos a cargar son una matriz listData y solo el área de datos. debe cortarse listData.slice(0, 10).

Cuando la barra de desplazamiento está hacia abajo, el número actual de filas se puede calcular sumando la altura de la barra de desplazamiento/la altura de una fila.

Para simular la altura de la barra de desplazamiento, la altura de la página se debe configurar manualmente cuando la página monta *listData.length.

Lo último y más importante es mantener la lista en su posición actual y configurar manualmente el padding-top del contenedor de la lista igual a la altura actual de la barra de desplazamiento.

Hay otro problema sin resolver, es decir, ¿tengo que volver a aplicar cada vez que me desplazo hacia adelante y hacia atrás para versionar una canción?

Dirección del proyecto

Solución para carga con desplazamiento infinito de una lista súper larga de Vue.js [Nuggets]