vue加载中展示【nprogress(进度条)&Lottie(动画)】

Lottie(动画)

简介

在vue中请求接口的过程中展示一个Lottie动画关于如何创建与使用可以点击查看，内有详细说明。

案例

1.首先在components中创建一个vue组件，用于存储Lottie动画

2.在Lottie_lottie.vue中写

<template>
  <lottie :options="defaultOptions" :height="200" :width="200" />
</template>
<script>
import * as lottieJson from "../assets/9844-loading-40-paperplane.json";
export default {
  data() {
    return {
      defaultOptions: {
        animationData: lottieJson.default /*文件资源*/,
      },
    };
  },
};
</script>

提示：引入的json文件为动画json源码，不懂的还是可以查看：点我

3.在需要用到此组件的组件内引入此组件

<template>
  <div>
    <Article :articleList="alist" @handleDel="delArticle"></Article>
    <Lottie v-if="fa"></Lottie>
  </div>
</template>
<script>
import Article from "../../components/Article.vue";  
import Lottie from "../../components/Lottie_lottie.vue";   //lottie组件
export default {
  data() {
    return {
      alist: [],
      fa: true,
    };
  },
  components: {
    Article,
    Lottie
  },
  created() {
    this.location();
  },
  methods: {
    async location() {
      const { data } = await this.$axios.get(
        `http://127.0.0.1:3000/api/blog/list/2`
      );
      if (data.code === 200) {
        this.fa = false;
      }
      this.alist = data.data;
    },
  },
};
</script>

解析：引入lottile组件后，设置此组件 v-if 为 true，当接口调用成功后将 v-if 设置为 false，以此达到 数据出现前lottile动画展示 的效果。

nprogress(进度条) 

 

简介

 nprogress是页面跳转时出现在浏览器顶部的进度条

安装

使用npm： npm install nprogress --save

引入和使用

介绍两个函数，start用于开始，done用于结束

NProgress.start();

NProgress.done();

引入：

import NProgress from "nprogress";

import "nprogress/nprogress.css";

使用：

async beforeRouteEnter(to, from, next) {
  NProgress.start();
  const { data } = await $axios.get(`http://127.0.0.1:3000/api/blog/list/1`);

  next((vm) => vm.location(data));
},

methods: {
  async location(data) {
    if (data.code === 200) {
      NProgress.done();
      this.fa = false;
    }
    this.alist = data.data;
  },
}