uniapp でグローバルに読み込みをカスタマイズする方法-uni-app-php.cn

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

WBOY

リリース： 2023-05-22 09:54:08

オリジナル

3073 人が閲覧しました

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

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

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

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

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

2. 実装計画

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

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

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 を通じて渡され、読み込みアニメーションを表示する必要があるかどうかを決定するために使用されます。

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 関数を削除します。

アニメーションの読み込みが必要な場合に 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 サイトの他の関連記事を参照してください。