解决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 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
2014年大学生自我评价
2014/01/19 职场文书
投标承诺书怎么写
2014/05/24 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
元旦晚会开场白
2015/05/29 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript