uniapp でグローバルに読み込みをカスタマイズする方法

モバイル インターネットの急速な発展により、モバイル アプリケーションは人々の生活に欠かせないものになりました。モバイル アプリケーション開発では、アニメーションの読み込みが特に重要であり、これによりユーザー エクスペリエンスが大幅に向上し、ユーザーがアプリケーションのフィードバックをより早く認識できるようになります。この記事では、uniapp を使用してグローバル カスタム ローディング アニメーションを実装し、ユーザー エクスペリエンスを向上させる方法を紹介します。

1. 読み込みアニメーションをカスタマイズする必要がある理由

アプリケーションでは、読み込みアニメーションは非常に一般的なフィードバック方法であり、通常は次の 2 つの状況に分けられます。

1. バックグラウンドとのインタラクションの待機: たとえば、バックグラウンド インターフェースをリクエストする場合、一定時間待機する必要がありますが、このとき、ユーザーにロード中であることを知らせるためにロード アニメーションが必要です。
2. 初期読み込み時間が長すぎます: たとえば、アプリケーションを開いたときに、アプリケーションの初期読み込みを待つ必要があります。このとき、ユーザーにそれを思い出させるための読み込みアニメーションも必要です。アプリケーションがロード中です。

ただし、デフォルトのスタイル読み込みアニメーションではニーズを満たせないことが多く、ユーザー エクスペリエンスを向上させるためにカスタム スタイルやアニメーションが必要になることがよくあります。したがって、読み込みアニメーションをグローバルにカスタマイズする必要があります。

2. 実装計画

uniapp では、App.vue に Loading コンポーネントを実装することで、親コンポーネントと子コンポーネント間の通信を原理として、グローバルなカスタム読み込みアニメーションを実装できます。グローバルローディングアニメーションの表示と非表示。

1. 読み込みコンポーネントの作成

src/components フォルダーの下に Loading フォルダーを作成し、その中に Loading.vue ファイルを作成して、カスタムの定義された読み込みアニメーション効果を表示します。 。

コードは次のとおりです:

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

上記のコードでは、div を作成し、そのスタイルを設定して読み込みアニメーションを表示します。 isShow 属性は props を通じて渡され、読み込みアニメーションを表示する必要があるかどうかを決定するために使用されます。

2. App.vue での Loading コンポーネントの導入

App.vue では、Loading コンポーネントを導入し、v-show を通じてその表示と非表示を制御する必要があります。

コードは次のとおりです:

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

App.vue に Loading コンポーネントを導入し、v-show を通じてその表示と非表示を制御しました。同時に、データに isLoading 変数を設定して、Loading コンポーネントの表示を制御します。

マウントされたライフ サイクルでは、$bus.$on を通じて startLoading と endLoading という名前のイベントをリッスンします。これら 2 つのイベントは、読み込みアニメーションを使用して親コンポーネントに読み込みコンポーネントを表示または非表示にするように通知する必要がある場合にトリガーされます。 。メモリ リークを避けるために、beforeDestroy ライフ サイクルの $bus.$off を通じて listen 関数を削除します。

3. アニメーションの読み込みが必要な場合に startLoading および endLoading イベントをトリガーする

アニメーションの読み込みが必要な場合、 $bus.$emit を通じて startLoading および endLoading イベントをトリガーし、Loading に通知します。 App.vue のコンポーネントを表示または非表示にします。

たとえば、非同期リクエストの場合:

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

上記のコードでは、Loading コンポーネントを表示するために使用されるデータを非同期にリクエストする前に、$bus.$emit を通じて startLoading イベントをトリガーしました。終了後、endLoading イベントがトリガーされ、Loading コンポーネントが非表示になります。

上記の 3 つの手順を通じて、単純なグローバル カスタム ローディング アニメーションを実装できます。

3. 概要

モバイル アプリケーション開発において、アニメーションの読み込みは非常に重要なフィードバック メカニズムです。 uniapp では、グローバル Loading コンポーネントをカスタマイズすることで、カスタム ローディング アニメーションを簡単に実装し、ユーザー エクスペリエンスを向上させることができます。

この記事では、主に 3 つの手順でグローバル カスタム ローディング アニメーションを実装します。まず、カスタマイズされたローディング アニメーション効果を表示するために Loading コンポーネントが作成され、次に Loading コンポーネントが App.vue に導入され、v-show を通じて導入されます。表示と非表示を制御し、最後に読み込みアニメーションが必要な startLoading および endLoading イベントをトリガーして、App.vue の Loading コンポーネントに表示または非表示を通知します。

以上がuniapp でグローバルに読み込みをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。