摘要：问题是当我在钩子函数中获取的时候，在新开的页签中打开页面，会得到错误的，但是在当前页面刷新，就不会有问题。解决方案给图片加上属性，并在那个组件里的钩子函数中写，这里的是用的，两个组件中事件响应的办法，不懂或者感兴趣的可以点这里。
遇到的问题定位问题最近在开发一个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。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95060.html
摘要：的钩子函数会在组件停用时被调用。是在构造函数中的声明的变量执行钩子函数执行执行钩子函数执行钩子函数刷新前根据对中的进行排序。 Vue 生命周期详解 Vue 生命周期流程 最开始，用户使用 new Vue() 创建根 Vue 实例，或者 Vue 实例化子组件都会调用_init方法（我们将这两种实例都称为vm）： function Vue(options) { //Vue 构...
摘要：上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。菜单栏接入数据导入组件，定义需要的数据格式导入滚动组件导入商品页面准备需要的数据初始化组件。 上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。 showImg(https://segmentfault.com/img/bVbu2JW?w=312&h=421); 菜单栏接入数据 导入组件，定义需要的数据格...
摘要：结论父子组件生命周期钩子的执行顺序遵循从外到内，然后再从内到外，不管嵌套几层深，也遵循这个规律。组件化的设计思路大抵相同，中父子组件生命周期钩子执行顺序，具体没做探究，但是值得一提的是父组件的也是晚于子组件执行的。 如今前端框架都流行组件化，页面元素都可以使用组件进行高度概括，那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系，才能让代码按照我们与预料方式工作。最...
摘要：如何添加这个条件，判断用户是否刷新了页面呢我们知道，当使用后，只有第一次进入后会触发钩子函数，再次进入就不再执行了。 目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注： 此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求...
摘要：本次分析的版本是。的实例化由上一章我们了解了类的定义，本章主要分析用户实例化类之后，框架内部做了具体的工作。所以我们先看看的构造函数里面定义了什么方法。这个文件声明了类的构造函数，构造函数中直接调用了实例方法来初始化的实例，并传入参数。 背景 Vue.js是现在国内比较火的前端框架，希望通过接下来的一系列文章，能够帮助大家更好的了解Vue.js的实现原理。本次分析的版本是Vue.js2...
阅读 1147·2021-11-24 10:43
阅读 3101·2021-11-22 09:34
阅读 3549·2021-10-08 10:04
阅读 3931·2021-09-23 11:58
阅读 3114·2019-08-30 15:44
阅读 482·2019-08-30 13:01
阅读 1155·2019-08-28 18:07
阅读 1446·2019-08-26 13:42
