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;},
}

vue加载中展示【nprogress(进度条)Lottie(动画)】相关推荐

android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
Android 三种方式实现自定义圆形页面加载中效果的进度条
转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现定义res/anim/loading.xml如 ...
iOS-仿支付宝加载web网页添加进度条
代码地址如下: http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条 ...
Vue加载中（Spin）
可自定义传入以下属性: 是否为加载中状态(spinning),默认为true 描述文案(tip),默认为空效果图如下: ①创建Spin.vue组件: <template><div ...
Vue.js中使用nprogress进度条
安装 npm install --save nprogress 简单使用 router目录下,index.js 引入 import NProgress from 'nprogress' import ...
WinForm中异步加载数据并使用进度条
在WinForm程序中,有时会因为加载大量数据导致UI界面假死,这种情况对于用户来说是非常不友好的.因此,在加载大量数据的情况下,首先应该将数据加载放在另一线程中进行,这样保证了UI界面的响应:其次可 ...
C# PictureBox加载图片并显示进度条
以前用winform的PictureBox时没有试过加载网络的图片,刚刚看到一段代码才了解到原来还有LoadAsync这个方法,可以异步加载图片,再加上LoadProgressChanged事件也可以 ...
android加载h5页面加进度条,使用Android仿微信加载H5页面的进度条
这篇文章主要为大家详细介绍了Android仿微信加载H5页面进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前言 Android中WebView打卡前端页面时受到网路环境,页面内容大小的影响 ...
android加载百分比功能,android进度条怎么显示百分比
android布局文件里的ProgressBar长形进度条怎么自在windows操作系统下Android studio按照如下步骤自动义ProgressBar长形进度条的样式. 首先创建一个andr ...
Android笔记之（图片高斯+Glide实现微信图片加载策略+仿微信进度条）
很久以前就想自己实现一下仿微信图片加载的那种策略了,先加载一张模糊的图片,然后再加载清晰大图,今天研究了一下,不过要是Glide支持进度条显示就好了,不得不说Glide很强大, 不啰嗦了,直接上代码了 ...

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

Lottie(动画)

简介

案例

nprogress(进度条)

简介

安装

引入和使用

vue加载中展示【nprogress(进度条)Lottie(动画)】相关推荐

最新文章

热门文章