DDR爱好者之家

解决Vue中mounted钩子函数获取节点高度出错问题
站长资源 2024/11/26 佚名
68 1538
DDR爱好者之家 Design By 杰米

遇到的问题

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米