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

Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下

简介：

这是一篇有关【Vue实现网页首屏加载动画、页面内请求数据加载loading】的文章，用最精简的语言去表达给前端读者们。

使用范例：

public/index.html【完整代码】

  <%= webpackConfig.name %>

注意：“加载动画不可与请求数据的组件同时使用!” 否则会出现两个加载效果。

在public/index中使用需要谨慎，因为这是全局加载的。
建议使用loading组件

1、四圆点加载动画

压缩版样式文件：

动画节点：

在id=“app” 标签内加入

2、旋涡加载动画

压缩版样式文件：

动画节点：

在id=“app” 标签内加入

 
正在加载,请耐心等待 
V0.1

3、电池状态加载动画

压缩版样式：

动画节点：

在id=“app” 标签内加入

4、请求数据缓慢实现loading提示【推荐】

下载加载图标GIF图标

Ⅰ、封装loading组件【推荐】

loading.vue

根文件（App.vue）中使用：

main.js中全局注册

Vue.prototype.bus = new Vue();

页面使用：

//获取列表数据 getList() { // 显示loading this.bus.$emit("loading", true); //请求接口 fetchList({ keywords: "水香木鱼", pageIndex: this.pageIndex, pageSize: this.pageSize, }) .then((res) => { this.listData = res.data; // 关闭loading this.bus.$emit("loading", false); }) .catch((error) => {}); },

Ⅱ、通过elementUI实现

//获取列表数据 getList() { // 开始加载loading let loading = this.$loading({ lock: true, //lock的修改符--默认是false text: "拼命加载中，请稍候...", //显示在加载图标下方的加载文案 background: "rgba(0,0,0,0.8)", //遮罩层颜色 spinner: "el-icon-loading", //自定义加载图标类名 }); //请求接口 fetchList({ keywords: "水香木鱼", pageIndex: this.pageIndex, pageSize: this.pageSize, }) .then((res) => { this.listData = res.data; //关闭loading loading.close(); }) .catch((error) => {}); },