vue刷新页面时去闪烁提升用户体验效果的实现方法


Posted in Javascript onDecember 10, 2018

首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true

随后添加provide()以及reload方法,如下:

export default {
 provide() {
  return {
  reload: this.reload
  }
 },
 data(){
 isReloadAlive : true
 },
 methods: {
 reload() {
   this.isReloadAlive = false;
   this.$nextTick(function(){
    this.isReloadAlive = true;
   })
  }
 }

最后调用this.reload()即可

补充:下面看下vue解决刷新时闪烁问题

1.在vue容器的div里面加上 v-cloak

<div id="app" v-cloak>

2.样式文件中加上

<style type="text/css">
  [v-cloak] {
   display: none !important;
  }
 </style>

总结

以上所述是小编给大家介绍的vue刷新页面时去闪烁提升体验方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中操作字符串小结
May 04 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
Vue Components 数字键盘的实现
Sep 18 Javascript
吃通javascript正则表达式
Apr 21 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 #Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 #Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
vue路由前进后退动画效果的实现代码
Dec 10 #Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 #Javascript
You might like
实用函数10
2007/11/08 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
php精度计算的问题解析
2019/06/21 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
setTimeout时间设置为0详细解析
2018/03/13 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
django框架如何集成celery进行开发
2017/05/24 Python
Django之PopUp的具体实现方法
2019/08/31 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
python输入中文的实例方法
2020/09/14 Python
帕克纽约:PARKER NY
2018/12/09 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
总监职责范文
2013/11/09 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
单位工作证明范本
2015/06/15 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
企业团队精神心得体会
2016/01/19 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
MySQL慢查询优化解决问题
2022/03/17 MySQL