赞
踩
在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是页面跳转时出现在浏览器顶部的进度条
使用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;
- },
- }

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。