解决Vue中mounted钩子函数获取节点高度出错问题


Posted in Javascript onMay 18, 2018

遇到的问题

最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上。问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题。

定位问题

后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是GET请求,是异步的,js运行的肯定比图片GET要快,所以当执行mounted钩子函数的时候,图片还没有全部加载完,这时候就会得到一个错误的offsetTop。

解决方案

给图片加上ref属性,并在那个组件里的mounted钩子函数中写,

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}

这里的Bus是用的EventBus,两个组件中事件响应的办法,不懂或者感兴趣的可以点这里EventBus。
需要得到offsetTop的组件里面

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})

这时候就可以确认每次不管是页面新打开还是当前页刷新都可以得到正确的offsetTop。

Javascript 相关文章推荐
密码强度检测效果实现原理与代码
Jan 04 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
关于JS中prototype的理解
Sep 07 Javascript
PassWord输入框代码分享
Jun 07 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 #Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 #Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
vue引用js文件的多种方式(推荐)
May 17 #Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
解析yii数据库的增删查改
2013/06/20 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP实现微信提现功能
2018/09/30 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js不是基础的基础
2006/12/24 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
八年级生物教学反思
2014/01/22 职场文书
先进个人获奖感言
2014/01/24 职场文书
愚人节活动策划方案
2014/03/11 职场文书
会计核算科岗位职责
2014/03/19 职场文书
2014年项目经理工作总结
2014/11/24 职场文书