溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目開發(fā)中導航欄隨頁面滾動漸隱漸顯這一功能還是較為常用的，下面作一個用vue實現此功能的代碼分享。
1. 為導航欄元素style屬性用v-bind綁定data數據"opacityStyle"。
<div class="header" :> 景點詳情 //內容我就簡約了，實際開發(fā)以需求為準 </div>
2. data中定義opacityStyle，數據內容是opacity透明度屬性，設置為0。
data() {
return {
opacityStyle:{ opacity:0 }
}
}
3. 監(jiān)聽scroll事件并執(zhí)行相應方法，一般我習慣在activated生命周期時開始監(jiān)聽(activated是keepAlive屬性下產生的一個生命周期，在進入頁面時)。
activated(){
window.addEventListener('scroll',this.handleScroll)
}
4. 設計handleScroll()方法。通過獲取scroll滾動偏移值，指定數值對opacity屬性進行計算，讓透明度聯(lián)動變化。
methods:{
handleScroll(){
const top = document.documentElement.scrollTop //獲取scroll偏移值
if(top > 45 && top <= 150){ //實際按需求取范圍
const opacity = top / 150 //對opacity作計算，透明度從起始到1隨偏移值而改變
this.opacityStyle = {opacity} //實時返回給opacityStyle
}
}
}
5. 對scroll監(jiān)聽進行解綁。剛剛在activated()中執(zhí)行監(jiān)聽，同樣的我們在deactivated()中移除監(jiān)聽。這一步很重要，很多人都會忽略，如果不解除將可能影響到其他頁面的scroll行為，導致項目產生bug。
deactivated(){
window.removeEventListener('scroll',this.handleScroll)
}
以上是vue實現頁面滾動顯隱導航欄功能的代碼和邏輯，有疑惑例如keepAlive用法等不明白的地方可查看文檔另外學習~
總結
到此這篇關于vue實現導航標題欄隨頁面滾動漸隱漸顯效果的文章就介紹到這了,更多相關vue 導航標題欄滾動漸隱漸顯內容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
