Comment gérer le squelette de page et le chargement de l'animation dans Vue

Comment gérer le squelette de page et l'animation de chargement dans Vue

Dans les applications Web modernes, les utilisateurs ont des attentes élevées en matière de chargement rapide des pages. Afin de répondre à cette demande, les développeurs peuvent utiliser certains moyens techniques pour améliorer la vitesse de chargement de la page et ajouter des effets d'animation pour améliorer l'expérience utilisateur.

Vue, en tant que framework JavaScript populaire, offre de nombreuses options pour gérer les squelettes de pages et charger des animations. Certaines méthodes courantes seront présentées en détail ci-dessous et des exemples de code spécifiques seront donnés.

1. Squelette de page

Le squelette de page fait référence à l'affichage d'une mise en page et de styles de base pendant le processus de chargement de la page, afin que les utilisateurs puissent percevoir que la page est en cours de chargement et réserver de l'espace pour le contenu à venir. Cela empêche la page de devenir vide pendant le chargement et améliore l'expérience utilisateur.

Dans Vue, vous pouvez utiliser la fonction de rendu de Vue pour créer le squelette de la page. Voici un exemple :

Vue.component('skeleton', {
  render: function (createElement) {
    return createElement('div', {
      attrs: {
        class: 'skeleton'
      }
    }, [
      createElement('div', {
        attrs: {
          class: 'skeleton-header'
        }
      }),
      createElement('div', {
        attrs: {
          class: 'skeleton-content'
        }
      }),
      createElement('div', {
        attrs: {
          class: 'skeleton-footer'
        }
      })
    ])
  }
})

Dans le code ci-dessus, nous créons un composant Vue global nommé "skeleton", qui utilise une fonction de rendu pour générer la structure HTML du squelette de la page. Dans cet exemple, nous créons un squelette contenant un en-tête, un contenu et un pied de page et le stylisons à l'aide de noms de classes CSS.

Ensuite, dans le composant qui doit afficher le squelette de la page, vous pouvez utiliser le rendu conditionnel pour déterminer quand afficher le squelette de la page. Voici un exemple :

<template>
  <div>
    <div v-if="loading">
      <skeleton></skeleton>
    </div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

Dans l'exemple ci-dessus, nous utilisons l'instruction de rendu conditionnel de Vue v-if pour déterminer quand afficher le squelette de la page. Lorsque le chargement est vrai, la page squelette est affichée ; lorsque le chargement est faux, le contenu réel de la page est affiché. Dans le hook de cycle de vie monté, nous simulons le processus de chargement de données asynchrone et définissons la valeur de chargement sur false après 2 secondes, comme indiqué dans l'exemple.

Grâce à la méthode ci-dessus, nous pouvons réaliser l'affichage du squelette pendant le processus de chargement de la page et améliorer l'expérience utilisateur.

2. Animation de chargement

L'animation de chargement consiste à transmettre les informations que la page est en train de charger à l'utilisateur et à fournir une sorte de retour visuel. Dans Vue, le chargement de l'animation peut être réalisé via une animation CSS, des bibliothèques tierces ou les effets de transition de Vue.

1. Animation CSS

L'utilisation de l'animation CSS est l'un des moyens les plus simples et les plus courants. Par exemple, nous pouvons définir une animation de rotation :

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  animation: spin 1s infinite linear;
}

Ensuite, ajoutez le nom de la classe CSS sur l'élément qui doit afficher l'animation de chargement, comme indiqué ci-dessous :

<template>
  <div>
    <div v-if="loading" class="loading"></div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

Dans l'exemple ci-dessus, lorsque le chargement est vrai, un message avec l'élément "loading", qui déclenchera l'animation CSS.

2. Bibliothèques tierces

En plus d'utiliser des animations CSS, nous pouvons également utiliser certaines bibliothèques tierces pour obtenir des effets d'animation de chargement plus complexes. Par exemple, utilisez la bibliothèque "vue-spinner" pour afficher une animation de chargement d'une icône tournante :

Tout d'abord, installez la bibliothèque "vue-spinner" :

npm install vue-spinner --save

Ensuite, importez et utilisez la bibliothèque dans le composant qui doit utilisez l'animation de chargement :

<template>
  <div>
    <div v-if="loading">
      <spinner></spinner>
    </div>
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import Spinner from 'vue-spinner'

export default {
  components: {
    Spinner
  },
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

Dans l'exemple ci-dessus, nous utilisons le rendu conditionnel pour déterminer quand afficher l'animation de chargement dans le composant qui doit afficher l'animation de chargement. Lorsque le chargement est vrai, affichez un composant "spinner", qui affichera une icône de chargement rotative. Lorsque le chargement est faux, le contenu réel de la page est affiché.

En résumé, Vue propose une variété de méthodes pour gérer les squelettes de page et charger des animations. En utilisant les fonctions de rendu et le rendu conditionnel, nous pouvons afficher le squelette de la page ; et en utilisant l'animation CSS et des bibliothèques tierces, nous pouvons obtenir divers effets d'animation de chargement sympas. En utilisant ces moyens techniques, nous pouvons améliorer la vitesse de chargement des pages des applications Web et offrir aux utilisateurs une meilleure expérience.

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!