錨點定位的問題

在開發h5頁面的時候,遇到一個錨點定位的問題,需要實現的功能如下:

上面這個頁面需要在手機上實現 

1)點擊“簡介”、“詳情”、“推薦”時,頁面滾動到相對應的位置

2)當手滑動屏幕,到相應位置時,頭部導航相對應的tab高亮顯示

首先,實現第一個功能,給每個對應的div增加相應的id="anchor_",代碼如下:

以上,是實現點擊導航,滾動到錨點的代碼。

實現滑動屏幕到相應位置,導航高亮顯示,需要藉助JS的window監聽事件。即在頁面加載進來,mounted的時候監聽:

需要在data中聲明一個變量:scroll

注意:此處監聽的對象一定是直接含有滾動條的元素上

在vue中需要watch這個scroll變量,根據當前滾動條的的位置來判斷當前處於什麼位置:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章