Comment personnaliser le chargement globalement dans Uniapp

Avec le développement rapide de l'Internet mobile, les applications mobiles sont devenues un élément indispensable de la vie des gens. Dans le développement d'applications mobiles, le chargement de l'animation est particulièrement important. Il peut améliorer considérablement l'expérience utilisateur et permettre aux utilisateurs de percevoir plus rapidement les commentaires sur les applications. Cet article explique comment utiliser Uniapp pour implémenter une animation de chargement personnalisée globale et améliorer l'expérience utilisateur.

1. Pourquoi devez-vous personnaliser l'animation de chargement

Dans une application, l'animation de chargement est une méthode de feedback très courante. Elle se divise généralement en deux situations :

1. En attente d'une interaction avec l'arrière-plan : Par exemple, lorsque. en demandant l'interface en arrière-plan, il faut attendre un certain temps, puis nous avons généralement besoin d'une animation de chargement pour rappeler à l'utilisateur qu'elle est en cours de chargement.
2. Le temps de chargement initial est trop long : par exemple, lorsqu'une application est ouverte, elle doit attendre le chargement initial de l'application. À ce moment-là, nous avons également besoin d'une animation de chargement pour rappeler à l'utilisateur que l'application est en cours de chargement. .

Mais l'animation de chargement de style par défaut ne peut souvent pas répondre à nos besoins, et des styles et des animations personnalisés sont souvent nécessaires pour améliorer l'expérience utilisateur. Par conséquent, nous devons personnaliser globalement l’animation de chargement.

2. Plan d'implémentation

Dans uniapp, vous pouvez implémenter une animation de chargement personnalisée globale en implémentant un composant Loading dans App.vue. Le principe est d'afficher et de masquer l'animation de chargement globale via la communication entre les composants parent et enfant.

1. Créer un composant de chargement

Dans le dossier src/components, créez un dossier Loading, puis créez un fichier Loading.vue à l'intérieur pour afficher l'effet d'animation de chargement personnalisé.

Le code est le suivant :

<template>
  <div v-show="isShow" class="loading">
    <img src="@/static/loading.gif" alt="loading" />
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style>
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  img {
    width: 60px;
    height: 60px;
  }
</style>

Dans le code ci-dessus, nous avons créé un div et défini son style pour afficher l'animation de chargement. L'attribut isShow est transmis via les accessoires et est utilisé pour déterminer si l'animation de chargement doit être affichée.

2. Présentation du composant Loading dans App.vue

Dans App.vue, nous devons introduire le composant Loading et contrôler son affichage et son masquage via v-show.

Le code est le suivant :

<template>
  <div>
    <Loading :isShow="isLoading" />
    <router-view />
  </div>
</template>

<script>
import Loading from '@/components/Loading/Loading'

export default {
  components: {
    Loading
  },

  data() {
    return {
      isLoading: false
    }
  },

  methods: {
    startLoading() {
      this.isLoading = true
    },

    endLoading() {
      this.isLoading = false
    }
  },

  mounted() {
    this.$bus.$on('startLoading', this.startLoading)
    this.$bus.$on('endLoading', this.endLoading)
  },

  beforeDestroy() {
    this.$bus.$off('startLoading', this.startLoading)
    this.$bus.$off('endLoading', this.endLoading)
  }
}
</script>

Nous avons introduit le composant Loading dans App.vue et contrôlé son affichage et son masquage via v-show. Dans le même temps, nous définissons la variable isLoading dans data pour contrôler l'affichage du composant Loading.

Dans le cycle de vie monté, écoutez les événements nommés startLoading et endLoading via $bus.$on. Ces deux événements sont déclenchés là où nous devons utiliser l'animation de chargement pour notifier au composant parent d'afficher ou de masquer le composant Loading. Supprimez la fonction d'écoute via $bus.$off dans le cycle de vie beforeDestroy pour éviter les fuites de mémoire.

3. Déclenchez les événements startLoading et endLoading là où une animation de chargement est nécessaire

Lorsque l'animation de chargement est nécessaire, nous déclenchons les événements startLoading et endLoading via $bus.$emit pour avertir le composant Loading dans App.vue d'afficher et de masquer.

Par exemple, dans une requête asynchrone :

import axios from 'axios'

export default {
  methods: {
    async fetchData() {
      try {
        this.$bus.$emit('startLoading') // 触发startLoading事件，显示Loading组件
        const response = await axios.get('/api/data') // 这里是异步请求数据
        console.log(response.data)
      } catch (error) {
        console.error(error)
      } finally {
        this.$bus.$emit('endLoading') // 触发endLoading事件，隐藏Loading组件
      }
    }
  }
}

Dans le code ci-dessus, nous avons déclenché l'événement startLoading via $bus.$emit avant de demander des données de manière asynchrone, qui sont utilisées pour afficher le composant Loading une fois la requête terminée. L'événement endLoading est déclenché en utilisant Pour masquer le composant Loading.

Grâce aux trois étapes ci-dessus, nous pouvons implémenter une simple animation de chargement personnalisée globale.

3. Résumé

Dans le développement d'applications mobiles, le chargement de l'animation est un mécanisme de rétroaction très important. Dans uniapp, en personnalisant le composant de chargement global, nous pouvons facilement implémenter des animations de chargement personnalisées et améliorer l'expérience utilisateur.

Cet article implémente principalement l'animation de chargement personnalisée globale en trois étapes. Tout d'abord, le composant Loading est créé pour afficher l'effet d'animation de chargement personnalisé. Ensuite, le composant Loading est introduit dans App.vue et son affichage et son contrôle sont contrôlés via v-show. . Masquez, et enfin déclenchez les événements startLoading et endLoading où l'animation de chargement est nécessaire pour indiquer au composant Loading dans App.vue de s'afficher ou de se masquer.

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!