Vue中mounted鉤子函式獲取節點高度出錯

2021-08-21 15:17:22 字數 665 閱讀 6901

遇到的問題

最近在開發乙個vue的專案,好幾個頁面都有用到乙個 頁面樓層滑動的元件,我就直接封裝成了乙個,但是遇到乙個bug,就是我需要得到這個元件的offsettop,然後頁面滾動到這個位置的時候,就設定position屬性為fixed,讓他固定在螢幕上。問題是當我在mounted鉤子函式中獲取offsettop的時候,在新開的頁籤中開啟頁面,會得到錯誤的offsettop,但是在當前頁面重新整理,就不會有問題。

後來查到問題,就是載入的問題,新視窗開啟,預設是沒有帶快取的,是get請求,是非同步的,js執行的肯定比get要快,所以當執行mounted鉤子函式的時候,還沒有全部載入完,這時候就會得到乙個錯誤的offsettop。

給加上ref屬性,並在那個元件裡的mounted鉤子函式中寫,

this.$refs.img.onload = ()=>
這裡的bus是用的eventbus,兩個元件中事件響應的辦法,不懂或者感興趣的可以點這裡eventbus。

需要得到offsettop的元件裡面

bus.$on('loadimgsuccess', () => )
這時候就可以確認每次不管是頁面新開啟還是當前頁重新整理都可以得到正確的offsettop。

mounted鉤子函式 對vue中鉤子函式的理解

1 beforecreate 鉤子 該階段元件例項剛建立,元件屬性計算之前 可理解為元件屬性還未初始化,未繫結,未掛載元素el 比如 el,data,methods等,如果你試圖在beforecreated鉤子中獲取這些屬性值,會得到ubdefined 的結果,但是 可以獲取到this物件,因為此時...

vue 鉤子函式

一共有十乙個,但是常見的八個,常用的三四個 beforecreate 建立之前 常用 vue建立之前,data未生產。在beforecreate前,所有的options都會先存到vm.options中,在beforecreate之後,將 options裡的data,props,methods等等乙個...

vue 鉤子函式

beforerouteenter to,from,next 1 this undefined 2 this.data undefined 3 methods 裡面的方法 undefined 4 如果有快取,該方法不會被呼叫 beforecreate 1 如果有快取,該方法不會被呼叫 2 this.d...