vue实战之狗血事件:页面loading效果诡异之事
接上回
想加一个切换路由时,跳出一个loading动画 ,路由加载后就消失
先做了一个loading提示的浮动层的组件,全局注册,在几个路由页面都引入
在vuex里面维护一个变量比如isLoading:false,用于是否显示loading组件
在loading组件中以computed方式自动依赖这个变量
在路由的beforeEach里面:
router.beforeEach((to,from,next)=>
store.commit('setLoading',true)
next()
});
路由加载后,就设为false (注意,afterEach里面没有next)
router.afterEach((to,from) =>{
store.commit('setLoading',false)
});
测试了一下,很奇怪,有时可以显示loading,有时不显示
用浏览器vue开发插件查看vuex变量isLoading,有时不变有时变
但每次切换路由都能控制台打印出消息
由于今天用的是08年的狗血笔记本,真特么 狗血笔记本出狗血事件,装win7运行特慢,编译也慢,
切换vscode竟然也要几秒,蠢货sublime竟然莫名其秒老是占满cpu
折腾了2小时,突然想到,把next()放在定时器里面,延迟500ms
没想到竟然可以了,猜测是next()执行下一个路由太快了
导致isLoading变量显示太快,loading动画来不及闪
vue实战之狗血事件:页面loading效果诡异之事的更多相关文章
- 页面loading效果
当网页太大,打开太慢的时候,为了增加良好的用户体验(不让用户眼巴巴的等,心中暗骂c,这么慢),我们需要加一个等待动画. 只需把以下代码加入页面中即可,图片可以根据自己的需求更换,更换图片之后需要改变l ...
- 前端页面loading效果(CSS实现)
当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...
- JQuery实现页面Loading效果
第一步:添加遮罩层和LOADING层 <div class="overlay"></div><div id="AjaxLoading&quo ...
- appcloud 加载第三方页面loading效果
apiready = function() { var header = $api.byId('header'); $api.fixIos7Bar(header); var headerPos = $ ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- vue中iframe加载慢,给它加loading效果
js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
随机推荐
- pycharm 调试 scrapy
http://blog.csdn.net/shijichao2/article/details/61940931
- 班级博客与coding地址
队名 队长 成员1 成员2 成员3 成员4 成员5 团队博客地址 奥特曼小分队 李全清 胡林状 王栋 孙杏子 孙乐 刘泽良 http://www.cnblogs.com/atmxfd/ 蜗牛上天队 仝 ...
- 使用Visual Studio 2013进行单元测试
使用Visual Studio 2013进行单元测试 1.打开VS2013 --> 新建一个项目.这里我们默认创建一个控制台项目.取名为UnitTestDemo 2.在解决方案里面新增一个单元测 ...
- PAT 甲级 1090 Highest Price in Supply Chain
https://pintia.cn/problem-sets/994805342720868352/problems/994805376476626944 A supply chain is a ne ...
- RocketMQ 事务消息
RocketMQ 事务消息在实现上充分利用了 RocketMQ 本身机制,在实现零依赖的基础上,同样实现了高性能.可扩展.全异步等一系列特性. 在具体实现上,RocketMQ 通过使用 Half To ...
- 新安装的Ubuntu设置root密码
一.问题描述 新安装的Ubuntu切换到root用户时如果没有设置root用户密码会操作失败.此时需要先设置root用户密码. 二.解决办法 打开终端执行 sudo passwd 命令. 输入设置的密 ...
- Redis的相关问题总结
一.Redis的优缺点及适用场景 Redis 是一个基于内存的高性能key-value数据库.很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘 ...
- npm 报错unable to verify the first certificate
npm总是报错:unable to verify the first certificate 原创 2017年09月30日 11:06:10 https://blog.csdn.net/nicexib ...
- Eclipse 的控制台console乱码
乱码!Eclipse 的控制台console必须用GBK编码. Eclipse 的控制台必须用GBK编码.所以条件1和条件4必须同时满足否则运行的还是乱码.才能保证不是乱码. 条件1,Window ...
- MT【80】单调性求函数表达式
提示:$f(f(f(x)-lnx)-ln(f(x)-lnx))=1+e=f(f(x)-lnx),\because f(x)$单调.得: $f(f(x)-lnx)-ln(f(x)-lnx)=f(x)-l ...