当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 解决Vue中mounted钩子函数获取节点高度出错问题

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

2018年05月29日  | 移动技术网IT编程  | 我要评论

当日特码玄机,李曼村,沙洋论坛

遇到的问题

最近在开发一个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。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网