Vue实现加载效果

最新推荐文章于 2024-04-18 09:32:54 发布
最新推荐文章于 2024-04-18 09:32:54 发布
阅读量877 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43741616/article/details/128038966
版权

Vue实现加载效果

 	<div  v-loading="loading">
          <iframe ref='top' width="100%" height="500px" frameborder="0" scrolling="yes" src=""></iframe>
    </div>

loading默认为false

 //点击查询按钮时加载页面
  QueryData() {
    this.loading=true;
    const iframe=this.$refs.top;
    this.$refs.top.src =``;//要加载的数据信息
    if (iframe.attachEvent) { // IE
      iframe.attachEvent('onload', () => { this.loading = false; });
    } else { // 非IE
      iframe.onload =  () => { this.loading = false; };
    }
  },
有那么一瞬间啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 编写全局loading加载动画效果
YBWarmYoung的博客
01-18 2994
加粗1.loading组件样式 <template> <transition name="fade"> <section> <div class="loading"> <!-- <img width="24px" height="24px" src="../images/timg.gif"> <p class="desc"&g
vue项目中，设置页面局部loading加载效果（element）v-loading
大哥的博客
08-21 3796
vue项目中，设置页面局部loading加载效果（element）v-loading
Vue-Loading：优雅地为Vue应用添加加载效果
最新发布
gitblog_00079的博客
04-18 515
Vue-Loading：优雅地为Vue应用添加加载效果 项目地址:https://gitcode.com/jkchao/vue-loading 在前端开发中，加载动画是提升用户体验的重要一环。Vue-Loading 就是一个专为Vue.js框架设计的轻量级加载组件库，它让开发者能够方便快捷地添加和管理页面及组件的加载状态。通过以下的技术分析和应用场景介绍，让我们一同探索Vue-Loading的魅力...
Vue项目整体添加加载中Loading页面
weixin_44735933的博客
09-28 3252
因为Vue通过axios请求后端数据 , 请求过程始终是异步的 , 开始想着用一个变量标识 , 进而让他显示加载中或者隐藏掉加载中的界面 后来发现页面中多模块都发起了不同的请求,这样的话 , 全部是异步的 , 该什么时候隐藏加载中模块就不得而知了 因此基于上面的问题 , 我在拦截器中进行了处理 让其在request请求拦截器中进行展示加载中页面 让其在response响应拦截器中进行隐藏加载中页面 代码如下 这是我的发起请求的封装的工具类 import axios from 'axios' import
Vue实现动态加载页面数据（下拉加载新数据）
qq_53679247的博客
02-23 2427
【代码】Vue实现动态加载页面数据（下拉加载新数据）
vue实现页面加载动画效果
08-29
主要为大家详细介绍了vue实现页面加载动画效果，vue页面出现正在加载的初始页面与实现动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现分页加载效果
10-15
主要为大家详细介绍了vue实现分页加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现下拉加载其实没那么复杂
12-29
一直不知道上拉加载，下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。想了一会没有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-list。啊呀，牛!无限滚动，十万条数据渲染。 经过我一大圈...
vue3让ChatGPT实现打字机效果
05-06
vue3让ChatGPT实现打字机效果
vue.js实现带表情评论仿bilibili（滚动加载效果）
pscool的博客
04-15 1231
vue.js实现带表情评论功能前后端实现（仿B站评论） 实现在vue项目中通过滚动条来滑动加载数据 IntersectionObserver与无限滚动加载要实现滚动加载，就是当滚动条滚动到底部的时候，再去请求后端评论数据，然后把数据添加到响应式数据数组中，然后由vue更新dom。 因此，我们需要能有方式能够监测的到滚动条是否滚动到了底部，一般有两种方式：可以通过 网页被卷去的头部高度 scrollTop 加上 浏览器客户端的高度 clientHeight 和 整个网页的高度 scrollHeight 做比较
【VUE项目实战】61、添加页面加载进度条效果
程序猿之洞
07-30 4702
我们要实现上面的进度条loading效果，就需要使用一个叫“nprogress”的第三方的包，官方工程github地址为：https://github.com/rstacruz/nprogress
VUE添加加载效果、axios拦截器实现全局加载效果
dj_xyp的博客
08-30 892
axios搭配elementui或其他ui框架实现拦截器配置全局加载效果
VUE首屏加载loading效果
qq_33396303的博客
02-22 3538
在使用乾坤微前端框架中，遇见图片资源路径存在访问问题，在不搭CDN的情况下，使用base64方式将图片资源打入代码。这样会导致包体积过大,加载时间长； 所以加了一个loading效果； 1.在index.html入口增加 loading； <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=
Vue设置全局loading（加载动画）功能：
SunPeng的博客
03-04 1万+
Vue设置全局loading（加载动画）功能：
vue2整个项目中，数据请求显示loading图
06-20 2万+
一般项目中，有时候会要求，你在数据请求的时候显示一张gif图片，然后数据加载完后，消失。这个，一般只需要在封装的axios中写入js事件即可。当然，我们首先需要在app.vue中，加入此图片。如下： template> div id="app"> loading v-show="fetchLoading">loading> router-view>router-view>
vue中加载loading
热门推荐
每天学习一点点
05-14 3万+
首先在components文件夹中新建一个loading.vue组件: 1.loading.vue组件内容如下： <template> <div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.5);"> <div class="sun-lo...
vue页面出现正在加载的初始页面与实现动画效果
gang456789的博客
09-19 1万+
我们经常看到数据未出现时，页面中会有一条提示消息， 页面正在加载中，如何实现该效果呢 ，请看下面代码<template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class=
vue按需加载实现
ChpeShy的博客
04-25 8627
按需加载：1. 将重量级路由内容单独生成一个或者多个js文件，而不是全部放在app.js中；2. 路由访问时再去加载对应的代码块。webpack打包会自动将所有依赖的JS代码打入一个文件，如果工程特别大，依赖的内容特别多的话，就会导致该文件特别的大，而大文件加载会导致性能不是特别的好。此时按需加载就显得尤为重要。参考：点击打开链接未按需加载生成的目录：app.js： 这个是项目代码的集合；mani...
在vue中，如何设置页面一加载就执行一个函数？
zk86547462的博客
07-28 7242
//页面加载时候执行 ,created() { axios.get('searchAll/1/20').then(response => { console.log(response); this.results = response.data;//绑定数据！ }) } 使用,created()就行了 ...
vue3加载动画实现
04-17
Vue 3提供了一种简单而灵活的方式来实现加载动画。你可以使用Vue的transition组件和动画类来实现。 首先，你需要在Vue组件中使用transition组件来包裹需要添加动画的元素。transition组件可以根据元素的进入和离开状态来应用动画效果。 下面是一个简单的示例，展示了如何使用Vue 3的transition组件来实现加载动画： ```html <template> <div> <transition name="fade"> <div v-if="isLoading" class="loading"> <!-- 加载动画的内容 --> </div> </transition> <button @click="startLoading">开始加载</button> </div> </template> <script> export default { data() { return { isLoading: false }; }, methods: { startLoading() { this.isLoading = true; // 模拟加载过程 setTimeout(() => { this.isLoading = false; }, 2000); } } }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } .loading { /* 加载动画的样式 */ } </style> ``` 在上面的示例中，我们使用了Vue的transition组件，并给它设置了一个name属性为"fade"。然后，在需要添加加载动画的地方，我们使用v-if指令来控制元素的显示和隐藏。当isLoading为true时，元素会以淡入的动画效果显示出来；当isLoading为false时，元素会以淡出的动画效果隐藏起来。 你可以根据自己的需求，自定义transition组件的样式和动画效果。在上面的示例中，我们使用了fade-enter-active、fade-leave-active、fade-enter和fade-leave-to这几个类来定义了一个简单的淡入淡出效果。 希望这个示例能够帮助你实现Vue 3的加载动画。如果你有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值