So passen Sie das Laden global in Uniapp an

Mit der rasanten Entwicklung des mobilen Internets sind mobile Anwendungen zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Bei der Entwicklung mobiler Anwendungen ist das Laden von Animationen besonders wichtig. Sie können das Benutzererlebnis erheblich verbessern und es Benutzern ermöglichen, Anwendungsfeedback schneller wahrzunehmen. In diesem Artikel wird erläutert, wie Sie mit uniapp eine globale benutzerdefinierte Ladeanimation implementieren und die Benutzererfahrung verbessern.

1. Warum müssen Sie die Ladeanimation anpassen? In einer Anwendung ist die Ladeanimation eine sehr häufige Feedbackmethode. Sie wird im Allgemeinen in zwei Situationen unterteilt:

1. Die anfängliche Ladezeit ist zu lang: Wenn beispielsweise eine Anwendung geöffnet wird, muss sie auf das erste Laden der Anwendung warten. Zu diesem Zeitpunkt benötigen wir auch eine Ladeanimation, um den Benutzer daran zu erinnern, dass die Anwendung geladen wird .
2. Aber die standardmäßige Ladeanimation im Stil kann unsere Anforderungen oft nicht erfüllen, und oft sind benutzerdefinierte Stile und Animationen erforderlich, um das Benutzererlebnis zu verbessern. Daher müssen wir die Ladeanimation global anpassen.

2. Implementierungsplan

In uniapp können Sie eine globale Ladeanimation implementieren, indem Sie eine Ladekomponente in App.vue implementieren. Das Prinzip besteht darin, die globale Ladeanimation durch Kommunikation zwischen übergeordneten und untergeordneten Komponenten anzuzeigen.

1. Erstellen Sie im Ordner src/components einen Loading-Ordner und erstellen Sie darin dann eine Loading.vue-Datei, um den benutzerdefinierten Ladeanimationseffekt anzuzeigen.

Der Code lautet wie folgt:

<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>

Im obigen Code haben wir ein Div erstellt und seinen Stil so festgelegt, dass die Ladeanimation angezeigt wird. Das isShow-Attribut wird über Requisiten übergeben und verwendet, um zu bestimmen, ob die Ladeanimation angezeigt werden muss.

In App.vue müssen wir die Loading-Komponente einführen und deren Anzeige und Ausblenden über V-Show steuern.

Der Code lautet wie folgt:

<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>

Wir haben die Loading-Komponente in App.vue eingeführt und deren Anzeige und Ausblenden über v-show gesteuert. Gleichzeitig legen wir die Variable isLoading in den Daten fest, um die Anzeige der Loading-Komponente zu steuern.

Überwachen Sie im gemounteten Lebenszyklus Ereignisse mit den Namen startLoading und endLoading über $bus.$on. Diese beiden Ereignisse werden ausgelöst, wenn wir die Ladeanimation verwenden müssen, um die übergeordnete Komponente zu benachrichtigen, die Loading-Komponente anzuzeigen oder auszublenden. Entfernen Sie die Abhörfunktion über $bus.$off im beforeDestroy-Lebenszyklus, um Speicherverluste zu vermeiden.

Wo eine Ladeanimation erforderlich ist, lösen wir startLoading- und endLoading-Ereignisse über $bus.$emit aus, um die Loading-Komponente in App.vue zum Ein- und Ausblenden zu benachrichtigen.

Zum Beispiel in einer asynchronen Anfrage:

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组件
      }
    }
  }
}

Im obigen Code haben wir das startLoading-Ereignis über $bus.$emit ausgelöst, bevor wir Daten asynchron anfordern, die zur Anzeige der Loading-Komponente verwendet werden Das endLoading-Ereignis wird ausgelöst, um die Loading-Komponente auszublenden.

Durch die oben genannten drei Schritte können wir eine einfache globale benutzerdefinierte Ladeanimation implementieren.

3. Zusammenfassung

Bei der Entwicklung mobiler Anwendungen ist das Laden von Animationen ein sehr wichtiger Feedback-Mechanismus. In uniapp können wir durch Anpassen der globalen Ladekomponente problemlos benutzerdefinierte Ladeanimationen implementieren und die Benutzererfahrung verbessern.

Dieser Artikel implementiert hauptsächlich die globale benutzerdefinierte Ladeanimation in drei Schritten. Zuerst wird die Ladekomponente erstellt, um den benutzerdefinierten Ladeanimationseffekt anzuzeigen. Anschließend wird die Ladekomponente in App.vue eingeführt und ihre Anzeige und Steuerung wird über v-show gesteuert . Ausblenden und schließlich die Ereignisse startLoading und endLoading auslösen, bei denen eine Ladeanimation erforderlich ist, um die Loading-Komponente in App.vue zum Anzeigen oder Ausblenden zu benachrichtigen.

Das obige ist der detaillierte Inhalt vonSo passen Sie das Laden global in Uniapp an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!