解决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 相关文章推荐
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
js实现右键菜单功能
Nov 28 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
JS库之Waypoints的用法详解
Sep 13 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php curl_init函数用法
2014/01/31 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
vue按需加载实例详解
2019/09/06 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python异常处理和日志处理方式
2019/12/24 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
python属于哪种语言
2020/08/16 Python
python中字符串的编码与解码详析
2020/12/03 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
晚宴邀请函范文
2014/01/15 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
新闻发布会策划方案
2014/06/12 职场文书
会议接待欢迎标语
2014/10/08 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
零基础学java之循环语句的使用
2022/04/10 Java/Android