解決Vue中mounted鉤子函數(shù)獲取節(jié)點(diǎn)高度出錯(cuò)問(wèn)題
遇到的問(wèn)題
最近在開(kāi)發(fā)一個(gè)Vue的項(xiàng)目，好幾個(gè)頁(yè)面都有用到一個(gè) 頁(yè)面樓層滑動(dòng)的組件，我就直接封裝成了一個(gè)，但是遇到一個(gè)bug，就是我需要得到這個(gè)組件的offsetTop，然后頁(yè)面滾動(dòng)到這個(gè)位置的時(shí)候，就設(shè)置position屬性為fixed，讓他固定在屏幕上。問(wèn)題是當(dāng)我在mounted鉤子函數(shù)中獲取offsetTop的時(shí)候，在新開(kāi)的頁(yè)簽中打開(kāi)頁(yè)面，會(huì)得到錯(cuò)誤的offsetTop，但是在當(dāng)前頁(yè)面刷新，就不會(huì)有問(wèn)題。
定位問(wèn)題
后來(lái)查到問(wèn)題，就是加載的問(wèn)題，新窗口打開(kāi)圖片，默認(rèn)是沒(méi)有帶緩存的，圖片是GET請(qǐng)求，是異步的，js運(yùn)行的肯定比圖片GET要快，所以當(dāng)執(zhí)行mounted鉤子函數(shù)的時(shí)候，圖片還沒(méi)有全部加載完，這時(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è)面新打開(kāi)還是當(dāng)前頁(yè)刷新都可以得到正確的offsetTop。
- 深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
- 詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
- Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)
- Vue指令的鉤子函數(shù)使用方法
- 深入理解Vue 的鉤子函數(shù)
- vue中各選項(xiàng)及鉤子函數(shù)執(zhí)行順序詳解
- vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
- Vue的路由及路由鉤子函數(shù)的實(shí)現(xiàn)
- vue.js動(dòng)畫中的js鉤子函數(shù)的實(shí)現(xiàn)
- Vue3生命周期鉤子函數(shù)詳解
相關(guān)文章
這篇文章主要介紹了在Vue中使用WebScoket，網(wǎng)絡(luò)的不穩(wěn)定而斷開(kāi)連接，webscoket不會(huì)出現(xiàn)異常，下面就一起進(jìn)入文章看看吧2022-01-01
手把手教你使用electron將vue項(xiàng)目打包成exe
Electron相當(dāng)于一個(gè)瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項(xiàng)目打包成exe的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue3保存屬性自動(dòng)換行問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法
今天小編就為大家分享一篇webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue項(xiàng)目打包步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問(wèn)題
這篇文章主要介紹了使用vuex的時(shí)候,出現(xiàn)this.$store為undefined問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過(guò)下標(biāo)修改數(shù)組,但頁(yè)面不會(huì)自動(dòng)更新的問(wèn)題,而這些問(wèn)題在vue3中都得以解決,本文就給大家詳細(xì)的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08
本文主要介紹了淺談Vue組件及組件的注冊(cè)方法，詳細(xì)的介紹了什么是組件，及其組件注冊(cè)的兩種方式(全局和局部)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識(shí)點(diǎn)，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02