Vue实现网页首屏加载动画及页面内请求数据加载loading效果

下面我就为您详细讲解 “Vue实现网页首屏加载动画及页面内请求数据加载loading效果”的完整攻略。

Vue实现网页首屏加载动画

第一步：安装v-loading插件

v-loading插件是Vue专门用于实现组件加载loading效果的插件。

安装命令如下：

npm install v-loading -S

第二步：创建Vue组件

在Vue组件中，可以使用v-loading插件自带的指令来实现loading效果。

<template>
  <div>
    <div class="loading" v-loading="loading"></div>
    <div v-if="!loading">页面内容</div>
  </div>
</template>

<script>
import Loading from 'v-loading';

export default {
  directives: {Loading},
  data() {
    return {
      loading: true,
      // 其他数据属性
    }
  },
  mounted() {
    // 异步请求完成后，将loading设置为false即可
    this.loading = false;
  },
  // 其他钩子函数和方法
}
</script>

至此，使用v-loading插件实现网页首屏加载动画的过程就结束了。

页面内请求数据加载loading效果

第一步：引入Vue-router路由组件

npm install vue-router -S

第二步：配置路由

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
   mode: 'history',
   routes: [
      {
         path: '/',
         name: 'Home',
         component: Home,
      },
      // 其他路由配置
   ],
});

第三步：使用路由守卫实现loading效果

<template>
  <div>
    <div class="loading" v-loading="loading"></div>
    <router-view></router-view>
  </div>
</template>

<script>
import Loading from 'v-loading';

export default {
  directives: {Loading},
  data() {
    return {
      loading: false,
      // 其他数据属性
    }
  },
  watch: {
    $route() {
      this.loading = true;
      setTimeout(() => {
        // 异步请求完成后，将loading设置为false即可
        this.loading = false;
      }, 1000);
    },
  },
  // 其他钩子函数和方法
}
</script>

如上所示，我们在Vue组件中使用了$router对象的watcher监听路由的变化，当路由变化时启用loading效果。异步请求完成后，将loading属性设置为false即可。

这样，我们就成功地实现了Vue网页首屏加载动画及页面内请求数据加载loading效果的攻略。