javascript - Comment utiliser la méthode de remplissage DIV vide pour résoudre le problème d'une trop grande quantité de données de liste?

Question

J'ai trouvé un problème lors de l'utilisation de Vue pour créer une page de liste : une donnée occupe une ligne, un écran peut contenir environ dix données et les nouvelles données sont chargées lorsque la barre de défilement défile jusqu'à la fin. Mais lorsque la quantité de données est particulièrement importante, peut-être des dizaines de milliers, il y aura alors beaucoup de nœuds DOM dans le HTML. À ce stade, je souhaite utiliser un p vide pour remplacer la liste de données qui n'est pas à l'écran. . Par exemple, affichez-le uniquement dans le HTML 3 nœuds de données qui peuvent être placés sur l'écran, et les données restantes sont remplies de deux ps. Lorsque la barre de défilement défile jusqu'à la hauteur d'un écran, les données affichées sont remplacées (. un tableau est utilisé dans VUE pour contrôler les données affichées), puis calculé Trouvez la méthode de mise en œuvre pour la hauteur du p supérieur et inférieur.

Answer 1

Je comprends l'idée de​​la question, qui est une pure optimisation front-end. Il est logique de contrôler le nombre d'éléments de la page.

Tous les scénarios ne sont pas adaptés à la pagination. De nos jours, de nombreuses listes sont chargées par défilement, et plus vous faites défiler, plus vous obtenez de données. .

Quant à la mise en œuvre, j'estime que ce que l'interlocuteur a dit est relativement clair. . Calculer les lignes qui doivent être affichées en fonction de la hauteur est correct, mais je pense que le p vide au-dessus et en dessous n'est pas nécessaire

Answer 2

Vous n'envisagez pas de faire une pagination ou quelque chose comme ça ? Quel est l'intérêt de faire ça ?

Answer 3

Comme ci-dessus, dans ce cas, la signification de la pagination est complètement plus grande que la façon dont vous l'écrivez (segemenfault recherche directement les composants de pagination Vue, il en existe des prêts à l'emploi, mais ce ne sont pas Vue2.0). Peut-être pensez-vous que si la quantité de données est très petite, l'ajout d'un autre composant de pagination sera moche.

Answer 4

La façon dont vous le faites donne l’impression que c’est juste du déconcerte, c’est beaucoup de travail, et ce n’est pas bon non plus. Utilisez un composant de pagination ! l'élément l'a. Composant de pagination. Réalisez l'effet