Maison >Applet WeChat >Développement de mini-programmes >Qu'est-ce que l'écran squelette ?
Récemment, il y a eu un besoin d'écrans squelette de temps en temps dans les projets, j'ai donc pris le temps de le faire quelques recherches sur les solutions d'écrans squelettes. Il y a eu de nombreuses pratiques d'écrans squelettes, et de nombreuses personnes ont présenté leurs propres solutions. Ici, je les ai résumées et classées en fonction de ma compréhension personnelle et je les ai partagées avec tout le monde.
Tutoriels recommandés : "Développement de mini-programmes" "Tutoriel vidéo de mini-programme"
L'écran squelette montre à l'utilisateur la structure générale de la page avant le chargement des données de la page, puis restitue la page après le renvoi des données demandées pour compléter le contenu des données qui doit être affiché. Il est souvent utilisé pour les pages de liste relativement régulières telles que les listes d'articles et les pages de liste dynamique.
Il est utilisé dans de nombreux projets : ex : Ele.me version h5, Zhihu, Facebook et d'autres sites ont des applications.
Emprunter une photo à titre d'exemple :
L'utilisation est expliquée en introduction, mais vous pouvez toujours continuez à le détailler. Points :
est utilisé comme chargement pour le changement d'itinéraire dans spa, combiné avec le cycle de vie du composant et le moment du retour de la requête ajax
.est utilisé comme première Optimisation du rendu de l'écran.
Le premier type d'utilisation vous oblige à écrire votre propre écran squelette. Deux solutions matures et faciles à personnaliser sont recommandées. Solution pour personnaliser les composants svg en écrans squelettes
react-content-loader
<.> et une fois le rendu terminé, tout en conservant le style de mise en page, supprimez ou ajoutez des éléments sur la page, et écrasez les éléments existants en cascade
afin que la page ne change pas. Sous la mise en page, masquez les images et le texte et recouvrez-les de styles ainsi. qu'ils sont affichés sous forme de blocs gris. Ensuite
extrayez les styles HTML et CSS modifiés, pour qu'il s'agisse d'un écran squelette
Tutoriels associés recommandés : "
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!