当前位置：首页 > VUE

vue实现资源加载动画

2026-01-22 02:18:50VUE

实现资源加载动画的方法

在Vue中实现资源加载动画可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画和Vue条件渲染

通过Vue的v-if或v-show指令控制加载动画的显示与隐藏。结合CSS动画实现平滑的视觉效果。

<template>
  <div>
    <div v-if="isLoading" class="loader"></div>
    <div v-else>
      <!-- 加载完成后的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    // 模拟资源加载
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

<style>
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

使用第三方库

可以利用现有的Vue加载动画组件库，如vue-loading-spinner或vue-simple-spinner，快速实现专业效果。

安装示例库：

npm install vue-simple-spinner

使用示例：

<template>
  <div>
    <spinner v-if="isLoading"></spinner>
    <div v-else>
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
import Spinner from 'vue-simple-spinner'

export default {
  components: {
    Spinner
  },
  data() {
    return {
      isLoading: true
    }
  }
}
</script>

结合Axios拦截器实现全局加载动画

对于网络请求，可以在Axios拦截器中统一管理加载状态。

// axios配置
axios.interceptors.request.use(config => {
  store.commit('SET_LOADING', true)
  return config
})

axios.interceptors.response.use(response => {
  store.commit('SET_LOADING', false)
  return response
}, error => {
  store.commit('SET_LOADING', false)
  return Promise.reject(error)
})

在Vue组件中使用：

<template>
  <div>
    <div v-if="$store.state.isLoading" class="global-loader"></div>
    <router-view/>
  </div>
</template>

骨架屏技术

使用骨架屏提升用户体验，在内容加载前显示页面结构轮廓。

<template>
  <div>
    <div v-if="loading" class="skeleton">
      <div class="skeleton-header"></div>
      <div class="skeleton-content"></div>
    </div>
    <div v-else>
      <!-- 实际内容 -->
    </div>
  </div>
</template>

<style>
.skeleton {
  /* 骨架屏样式 */
}
</style>