Vue でページのスケルトンとアニメーションの読み込みを処理する方法

Vue でページのスケルトンと読み込みアニメーションを処理する方法には、特定のコード サンプルが必要です

Web アプリケーションを開発する場合、ページの読み込み速度は非常に重要です。要素。ページの読み込みが速いと、ユーザー エクスペリエンスが向上するだけでなく、ユーザー維持率も効果的に向上します。 Vue フレームワークでは、ページ スケルトンとアニメーションの読み込みを使用することで、ページ読み込みプロセスを最適化し、ユーザーにより良いエクスペリエンスを提供できます。

ページ スケルトンとは、ユーザーがページの構造とレイアウトを一般的に理解できるように、ページ データがロードされる前にページの空白領域を埋める事前に設計されたインターフェイス フレームワークを提供することを指します。 。読み込みアニメーションは、ページ データの読み込みプロセス中にユーザーに動的な効果を示し、ページが読み込み中であることをユーザーに思い出させ、ユーザーの忍耐力と待ち時間を増やします。

以下では、コード例を使用して、Vue でページのスケルトンと読み込みアニメーションを処理する方法を紹介します。

まず、vue-content-loader プラグインをインストールする必要があります。これは、スケルトン画面のコードを生成するために使用できます。ターミナルで次のコマンドを実行します:

npm install vue-content-loader

次に、スケルトン画面を追加する必要があるコンポーネントに vue-content-loader を導入して登録します:

// 引入vue-content-loader
import ContentLoader from 'vue-content-loader'

export default {
  // 注册ContentLoader组件
  components: {
    ContentLoader
  },
  // ...
}

次に、テンプレートの ContentLoader コンポーネントを使用して、スケルトン画面のスタイルとレイアウトを定義します。

<template>
  <div>
    <ContentLoader
      :width="300"
      :height="200"
      primaryColor="#f3f3f3"
      secondaryColor="#ecebeb"
    >
      <rect x="0" y="0" rx="5" ry="5" :width="300" :height="10"/>
      <rect x="0" y="20" rx="5" ry="5" :width="250" :height="10"/>
      <rect x="0" y="40" rx="5" ry="5" :width="200" :height="10"/>
      <rect x="0" y="60" rx="5" ry="5" :width="150" :height="10"/>
    </ContentLoader>
  </div>
</template>

上記のコードでは、ContentLoader コンポーネントを使用します。 300x200px のスケルトン画面を作成するには、rect 要素を使用してスケルトン画面のスタイルとレイアウトを定義します。 primaryColor はプライマリ カラーを定義するために使用され、secondaryColor はセカンダリ カラーを定義するために使用されます。

次に、Vueでローディングアニメーションを追加する方法を紹介します。

まず、Vue が提供する v-if 命令を使用して、読み込みアニメーションの表示と非表示を制御できます。データ内で isLoading 属性を定義することで、読み込みアニメーションの表示と非表示を制御できます。データがロードされたら、isLoading プロパティを false に設定すると、ロード アニメーションが消えます。

次に、読み込みアニメーションを追加する必要があるコンポーネントで、Vue の計算されたプロパティを使用して、isLoading の値に基づいて読み込みアニメーションを表示または非表示にすることができます。

export default {
  data() {
    return {
      isLoading: true, // 数据是否正在加载中
      data: null, // 数据
    }
  },
  computed: {
    showLoadingAnimation() {
      return this.isLoading ? 'loading-animation' : 'data-content'
    },
  },
  // ...
}

テンプレートでは、v-if ディレクティブを使用して、計算されたプロパティ showLoadingAnimation の値に基づいて読み込みアニメーションの表示と非表示を制御できます。 。

<template>
  <div>
    <div v-if="showLoadingAnimation === 'loading-animation'">
      <p>加载中...</p>
      <!-- 这里可以使用第三方库来添加加载动画 -->
    </div>
    <div v-else-if="showLoadingAnimation === 'data-content'">
      <!-- 数据内容 -->
    </div>
  </div>
</template>

上記のコードでは、読み込みアニメーションを div 要素でラップし、showLoadingAnimation# の値に基づいて読み込みアニメーションとデータの内容のどちらを表示するかを決定します。 ##。

以上がVue でページのスケルトンとアニメーションの読み込みを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。