項(xiàng)目開發(fā)中導(dǎo)航欄隨頁面滾動(dòng)漸隱漸顯這一功能還是較為常用的，下面作一個(gè)用vue實(shí)現(xiàn)此功能的代碼分享。

1. 為導(dǎo)航欄元素style屬性用v-bind綁定data數(shù)據(jù)'opacityStyle'。

<div :style='opacityStyle'> 景點(diǎn)詳情 //內(nèi)容我就簡約了，實(shí)際開發(fā)以需求為準(zhǔn)</div>

2. data中定義opacityStyle，數(shù)據(jù)內(nèi)容是opacity透明度屬性，設(shè)置為0。

data() { return { opacityStyle:{ opacity:0 } }}

3. 監(jiān)聽scroll事件并執(zhí)行相應(yīng)方法，一般我習(xí)慣在activated生命周期時(shí)開始監(jiān)聽(activated是keepAlive屬性下產(chǎn)生的一個(gè)生命周期，在進(jìn)入頁面時(shí))。

activated(){ window.addEventListener(’scroll’,this.handleScroll)}

4. 設(shè)計(jì)handleScroll()方法。通過獲取scroll滾動(dòng)偏移值，指定數(shù)值對(duì)opacity屬性進(jìn)行計(jì)算，讓透明度聯(lián)動(dòng)變化。

methods:{ handleScroll(){ const top = document.documentElement.scrollTop //獲取scroll偏移值 if(top > 45 && top <= 150){ //實(shí)際按需求取范圍 const opacity = top / 150 //對(duì)opacity作計(jì)算，透明度從起始到1隨偏移值而改變 this.opacityStyle = {opacity} //實(shí)時(shí)返回給opacityStyle } }}

5. 對(duì)scroll監(jiān)聽進(jìn)行解綁。剛剛在activated()中執(zhí)行監(jiān)聽，同樣的我們?cè)赿eactivated()中移除監(jiān)聽。這一步很重要，很多人都會(huì)忽略，如果不解除將可能影響到其他頁面的scroll行為，導(dǎo)致項(xiàng)目產(chǎn)生bug。

deactivated(){ window.removeEventListener(’scroll’,this.handleScroll)}

以上是vue實(shí)現(xiàn)頁面滾動(dòng)顯隱導(dǎo)航欄功能的代碼和邏輯，有疑惑例如keepAlive用法等不明白的地方可查看文檔另外學(xué)習(xí)~

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動(dòng)漸隱漸顯效果的文章就介紹到這了,更多相關(guān)vue 導(dǎo)航標(biāo)題欄滾動(dòng)漸隱漸顯內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！