位置: IT常识 - 正文

Vue实现网页首屏加载动画、页面内请求数据加载loading(vue默认首页)

编辑：rootadmin

Vue实现网页首屏加载动画、页面内请求数据加载loading 博主介绍

推荐整理分享Vue实现网页首屏加载动画、页面内请求数据加载loading(vue默认首页)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue默认首页,vue开发网站首页,vue界面,vue开发网站首页,vue单页应用首屏加载优化,vue怎么设置首页,vue首页布局,vue怎么设置首页,内容如对您有帮助，希望把文章链接给更多的朋友！

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼 🍍专栏：后台管理系统

文章目录

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

四圆点漩涡电池状态请求数据加载loading齿轮gif图片效果

使用范例：public/index.html【完整代码】

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />  <style>html,body,#app{width:100%;height:100%;}.d2-home{background-color:#303133;height:100%;display:flex;position:relative;}.d2-home__main{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);}.d2-home__footer{width:100%;flex-grow:0;text-align:center;padding:1em 0;}.d2-home__loading{height:82px;width:82px;}</style> <title><%= webpackConfig.name %></title> </head> <body> <noscript> <strong >We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app">  <div class="d2-home__main"> <img class="d2-home__loading" src="./image/20180919030732834.gif" alt="loading" /> </div> </div>  </body></html>

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

在public/index中使用需要谨慎，因为这是全局加载的。建议使用loading组件1、四圆点加载动画

压缩版样式文件：

动画节点：

在id=“app” 标签内加入

<div id="loading-mask"> <div class="loading-wrapper"> <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span> </div></div>2、旋涡加载动画

压缩版样式文件：

动画节点：

在id=“app” 标签内加入

<div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在加载,请耐心等待 <br> <span>V0.1</span> </div></div>3、电池状态加载动画

压缩版样式：

动画节点：

在id=“app” 标签内加入

<div id="app-cockpit-loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div>4、请求数据缓慢实现loading提示【推荐】

更多加载图标请移步–网页动态加载（loading）GIF图标

Ⅰ、封装loading组件【推荐】

loading.vue

<template> <div class="loadingBox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5)" > <div class="sun-loading"></div> </div></template><script>export default { name: "loading", data() { return { loading: false, }; }, created() { var that = this; this.bus.$on("loading", function (data) { that.loading = !!data; }); },};</script><style lang="less" scoped>.sun-loading { width: 45px; height: 45px; display: block; animation: sunLoading 1s steps(12, end) infinite; background: transparent url("https://www.yuucn.com/wp-content/uploads/2023/04/1682077944-a72a629df18b8ad.gif?imageMogr2/format/jpg/blur/1x0/quality/60"); background-size: 100%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}</style>

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

<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" />  <Loading></Loading> <div style="height: 30px"></div> </div></template><script>import Loading from "./components/loading.vue";//引用loading组件export default { components: { Loading, },};</script>

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) => {});},5、齿轮加载gif效果

压缩版样式：

动画节点：

在id=“app” 标签内加入

<div class="d2-home__main"> <img class="d2-home__loading" src="./image/20180919030732834.gif" alt="loading" /></div>相关推荐

⭐Vue实现任意内容展开 / 收起功能组件 ⭐Vue实现点击按钮或者图标可编辑输入框 ⭐vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】 ⭐一文图解前端WebSocket 实时通信 ⭐前端实现放大镜效果【原生js实现、vue实现】

本文链接地址:https://www.jiuchutong.com/zhishi/287943.html 转载请保留说明！

上一篇：Obsidian：实现日记记录【设计并使用模板】

下一篇：日落时的多伦多天际线 (© diegograndi/Getty Images)(多伦多日照时间)