当前位置:   article > 正文

vue加载中展示【nprogress(进度条)&Lottie(动画)】_进度条的lottie文件

进度条的lottie文件

Lottie(动画)

简介

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

案例

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

2.在Lottie_lottie.vue中写

  1. <template>
  2. <lottie :options="defaultOptions" :height="200" :width="200" />
  3. </template>
  4. <script>
  5. import * as lottieJson from "../assets/9844-loading-40-paperplane.json";
  6. export default {
  7. data() {
  8. return {
  9. defaultOptions: {
  10. animationData: lottieJson.default /*文件资源*/,
  11. },
  12. };
  13. },
  14. };
  15. </script>

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

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

  1. <template>
  2. <div>
  3. <Article :articleList="alist" @handleDel="delArticle"></Article>
  4. <Lottie v-if="fa"></Lottie>
  5. </div>
  6. </template>
  7. <script>
  8. import Article from "../../components/Article.vue";
  9. import Lottie from "../../components/Lottie_lottie.vue"; //lottie组件
  10. export default {
  11. data() {
  12. return {
  13. alist: [],
  14. fa: true,
  15. };
  16. },
  17. components: {
  18. Article,
  19. Lottie
  20. },
  21. created() {
  22. this.location();
  23. },
  24. methods: {
  25. async location() {
  26. const { data } = await this.$axios.get(
  27. `http://127.0.0.1:3000/api/blog/list/2`
  28. );
  29. if (data.code === 200) {
  30. this.fa = false;
  31. }
  32. this.alist = data.data;
  33. },
  34. },
  35. };
  36. </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";

使用:

  1. async beforeRouteEnter(to, from, next) {
  2. NProgress.start();
  3. const { data } = await $axios.get(`http://127.0.0.1:3000/api/blog/list/1`);
  4. next((vm) => vm.location(data));
  5. },
  6. methods: {
  7. async location(data) {
  8. if (data.code === 200) {
  9. NProgress.done();
  10. this.fa = false;
  11. }
  12. this.alist = data.data;
  13. },
  14. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/729851
推荐阅读
相关标签
  

闽ICP备14008679号