遇到的問題

最近在開發(fā)一個(gè)Vue的項(xiàng)目，好幾個(gè)頁(yè)面都有用到一個(gè) 頁(yè)面樓層滑動(dòng)的組件，我就直接封裝成了一個(gè)，但是遇到一個(gè)bug，就是我需要得到這個(gè)組件的offsetTop，然后頁(yè)面滾動(dòng)到這個(gè)位置的時(shí)候，就設(shè)置position屬性為fixed，讓他固定在屏幕上。問題是當(dāng)我在mounted鉤子函數(shù)中獲取offsetTop的時(shí)候，在新開的頁(yè)簽中打開頁(yè)面，會(huì)得到錯(cuò)誤的offsetTop，但是在當(dāng)前頁(yè)面刷新，就不會(huì)有問題。

定位問題

后來查到問題，就是加載的問題，新窗口打開圖片，默認(rèn)是沒有帶緩存的，圖片是GET請(qǐng)求，是異步的，js運(yùn)行的肯定比圖片GET要快，所以當(dāng)執(zhí)行mounted鉤子函數(shù)的時(shí)候，圖片還沒有全部加載完，這時(shí)候就會(huì)得到一個(gè)錯(cuò)誤的offsetTop。

解決方案

給圖片加上ref屬性，并在那個(gè)組件里的mounted鉤子函數(shù)中寫，

this.$refs.img.onload = ()=>{
    Bus.$emit('loadImgSuccess')
}

這里的Bus是用的EventBus，兩個(gè)組件中事件響應(yīng)的辦法，不懂或者感興趣的可以點(diǎn)這里EventBus。
需要得到offsetTop的組件里面

Bus.$on('loadImgSuccess', () => {
    var offsetTop = this.$refs.dom.offsetTop  
})

這時(shí)候就可以確認(rèn)每次不管是頁(yè)面新打開還是當(dāng)前頁(yè)刷新都可以得到正確的offsetTop。