Loading 加载数据一直转圈圈停不下来怎么办，看这个一学就会

最新推荐文章于 2024-05-04 22:24:31 发布

星辰大海Amy

最新推荐文章于 2024-05-04 22:24:31 发布

阅读量3.8k

点赞数 5

分类专栏：前端学习笔记文章标签： Vue 加载动画 v-loading 数据绑定前端开发

本文链接：https://blog.csdn.net/m0_61426556/article/details/120543577

版权

前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

话不多说，先上代码

在表头加上v-loading就行绑定

然后在data中定义

最后找到你需要加载的页面或者表格我这边是表格

在加载的时候写上this.loading= true,然后等代码执行完写上this.loading=false就可以了最后上效果图

这样效果就出来了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

星辰大海Amy

关注关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS机械齿轮Loading，爱的魔力转圈圈

web秀

08-20

266

前言 “爱的魔力转圈圈，想你想到心花怒放黑夜白天，可是我害怕爱情只是一瞬间，转眼会不见…”，嗨起来，小伙伴们，跟我一起来！干啥玩意？这节是计算机课，不是音乐课。确定不是机械课？额，差不太多吧，总之就是玩儿个轮子。看图，怎么都是机械课啊，但是我们本次课程，只需要将其效果用HTML + CSS实现，所以还是计算机课，想上音乐课、机械课的可以先离开一下。下面回归正题，对示例讲解先来个轮子大家肯定想，齿轮的锯齿如何实现呢？其实很简单就可以画出来，大家看下方代码 <div id="loadin

Vue中请求接口使用elementUI的loading的显示功能

zjh_hhh的博客

04-09

3115

今天实现一个简单的功能，也是工作当中遇到的，大概就是请求接口没返回数据的时候loading显示，返回数据后loading消失首先在表格标签里引入loading样式，加载时的信息和绑定好表头和表格里面的数据 :table-cols='tableColsMax' :table-data='tableData' v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="

5 条评论您还未登录，请先登录后发表或查看评论

前端vue访问接口没有权限时则页面一直加载

啊哈的博客

09-08

2851

前端vue访问接口没有权限时则页面一直加载

v-loading加载中

热门推荐

qq_36437172的博客

11-01

3万+

使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。 //全局loading <template> <div v-loading="loading"> </div> </template> 在data 中定义初始化， loading: false，同时在mounted()中将 this.loading设置为t...

转圈动画，loading

08-12

加载转圈等待效果，自定义图片。loading Animation 转圈动画等待加载

vue 使用element中的el-table ,页面卡死一直转圈

xcc_2269861428的博客

08-06

5780

如图页面一直在加载，转圈，百度一圈，看到有说vue版本过低造成的。查看下当前使用的vue的版本为2.2.2 升级vue的版本到最新版本发现可以了

uniapp中使用ucharts一直在转圈？？？显示在加载....

博客简介

03-27

1842

uniapp中使用ucharts一直在转圈？？？显示在加载....

很常见的一直旋转的loading效果

dingxu5652的博客

09-18

996

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Loading小动画</title> 6 <meta name="author" content="http://www.cnblog...

layui表格有数据却渲染不出来，一直转圈加载中

qq_39280563的博客

08-04

7615

还是先上图，页面一直卡着，数据加载不出来，连表头都没有渲染出来。首选我要说的是，我的所有字段都是正确的。表头字段与数据源不一致的情况，数据出不来，起码表格行数还在。我这是整个表格都没出来，字段名拼写错误的同学可以出门右转了。控制台显示的卡住页面的节点信息，layui-table-init： <div class="layui-table-init" style="background-color: #fff;"> <i class="layui-icon lay..

iview前端向后端传数据一直转圈_记一次开发过程中，iview遇到的一些坑以及解决办法...

weixin_39959482的博客

12-22

796

写在开头：本次项目采用的是vue2.0+iview3.0，最近公司没啥事，来总结一下开发过程中遇到的问题。1、Modal关闭问题需求背景：modal框里面是个form表单，点击确定之后，先验证form表单，验证通过则关闭modal框，验证不成功则提示用户，不关闭。问题描述：本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制，手动改之后，报错。解决办法：官方ivie...

ajax请求之前,ajax请求完之前的loading加载

weixin_32705179的博客

08-05

808

很多时候我们需要引入框架来开发项目，这时我们可能会遇到页面还没加载完源码出来了的问题，给用户一种不好的视觉体验，这是便需要loading加载了，来完善用户体验！/*loading.js*/// 加载HTML图 var _LoadingHtml = '加载中。。。';// 呈现loading效果document.write(_LoadingHtml);// 监听加载状态改变document.onre...

react如何控制全局loading_优雅地使用loading(推荐)

weixin_35180432的博客

01-15

1466

前言不知道从什么时候开始有了写博客的想法，奈何自己的知识储备还很薄弱，迟迟无法下笔。这是我的第一篇博客，算是记录一下自己学习前端以来的一些知识吧。如有错漏，恳请指出，您的批评和指正是我前进路上的一大动力！在平时的开发过程中，我们需要异步等待数据，常常会利用loading图来加强用户的体验，让用户知道我们有在加载，那么如何在开发过程中更为优雅地使用loading呢？开发小程序的时候我们只需要一句wx...

Winform--实现加载数据时动态等待/加载效果

aoqieshai7178的博客

11-23

1940

最近在遇到数据加载耗时比较长，想用一个动态等待效果来告诉用户程序还没死，以下是实现过程。实现两种效果：一种条形进度条，不停滚动；一种有几个红点在动态循环。原本想上传视频更清楚一点，无奈不太会用，丢人了…… 第一种效果：条形进度条优势：极其简单，直接使用的是winform里面的控件—progressbar，将其style属性设置为Marquee，MarqueeAnimat...

css 实现一个loading旋转，减少img请求，变相提升网络加载速度

weixin_33725270的博客

07-12

2043

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .l

loading--加载转圈圈效果

qq_43636471的博客

09-18

3080

loading--加载转圈圈效果

【Vue】图片加载中显示Loading

Maria028的博客

07-07

4542

问题加载图片列表式，渲染缓慢，影响体验解决图片加载完成前显示loading，图片加载错误显示错误图片 <template> <view> < :src="url"></img> </view> </template> <script> export default { name: 'myImage', props: { src: { type: String, }, },

HBuilder路由取消全局router-loadding .loadding

weixin_45859470的博客

01-30

194

1、在router路由的js文件找到h5，然后加上loading: false即可。

2024年Web前端最全vue3 解决各场景 loading过度，避免白屏尴尬！_vue3 loading，我的移动开发春季历程

最新发布

2401_84413180的博客

05-04

792

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

解决Anaconda Navigator无法正常打开，一直停留在loading application

qq_40953370的博客

11-23

5116

如果是首次遇到这个问题，可以按照下边这篇博客的方法操作，一般会解决问题：(27条消息) 解决：Anaconda无法正常打开，一直停留在loading application_AbuXiL的博客-CSDN博客_anaconda一直处于加载状态我是根据上边博客的方法解决了这个问题，几个月后又遇到Anaconda Navigator无法正常打开的问题，通过不断尝试，找到以下方法：先右键Anaconda Prompt以管理员身份运行，换源： #删除之前的镜像源，恢复默认状态 conda config

写一个全局的loading加载遮罩层，点击请求的时候显示这个loading

06-13

好的，关于全局的loading加载遮罩层，可以通过以下步骤实现： 1. 在页面中添加一个遮罩层的html结构，用于显示loading效果，同时设置其样式为绝对定位、覆盖全屏、背景色为半透明等。 2. 利用CSS设置该遮罩层在页面加载时默认为隐藏状态。 3. 在JavaScript中监听所有的请求事件，当请求发起时，将遮罩层显示出来。 4. 当请求完成后，将遮罩层隐藏。同时，需要注意处理请求出错的情况，将遮罩层也同样隐藏。下面是示例代码，供参考： HTML结构： ```html <div class="loading-mask"> <div class="loading"> <span>加载中...</span> </div> </div> ``` CSS样式： ```css .loading-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: none; } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } ``` JavaScript代码： ```javascript // 获取遮罩层元素 var loadingMask = document.querySelector('.loading-mask'); // 监听请求事件 document.addEventListener('ajaxStart', function() { // 显示遮罩层 loadingMask.style.display = 'block'; }); // 监听请求完成事件 document.addEventListener('ajaxComplete', function() { // 隐藏遮罩层 loadingMask.style.display = 'none'; }); // 监听请求出错事件 document.addEventListener('ajaxError', function() { // 隐藏遮罩层 loadingMask.style.display = 'none'; }); ``` 以上代码在jQuery中使用，如果使用其他框架或原生JavaScript，需要根据具体情况进行修改。