vue實現(xiàn)導航標題欄隨頁面滾動漸隱漸顯效果
項目開發(fā)中導航欄隨頁面滾動漸隱漸顯這一功能還是較為常用的，下面作一個用vue實現(xiàn)此功能的代碼分享。
1. 為導航欄元素style屬性用v-bind綁定data數(shù)據(jù)"opacityStyle"。
<div class="header" :style="opacityStyle"> 景點詳情 //內(nèi)容我就簡約了，實際開發(fā)以需求為準 </div>
2. data中定義opacityStyle，數(shù)據(jù)內(nèi)容是opacity透明度屬性，設(shè)置為0。
data() {
return {
opacityStyle:{ opacity:0 }
}
}
3. 監(jiān)聽scroll事件并執(zhí)行相應(yīng)方法，一般我習慣在activated生命周期時開始監(jiān)聽(activated是keepAlive屬性下產(chǎn)生的一個生命周期，在進入頁面時)。
activated(){
window.addEventListener('scroll',this.handleScroll)
}
4. 設(shè)計handleScroll()方法。通過獲取scroll滾動偏移值，指定數(shù)值對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行為，導致項目產(chǎn)生bug。
deactivated(){
window.removeEventListener('scroll',this.handleScroll)
}
以上是vue實現(xiàn)頁面滾動顯隱導航欄功能的代碼和邏輯，有疑惑例如keepAlive用法等不明白的地方可查看文檔另外學習~
總結(jié)
到此這篇關(guān)于vue實現(xiàn)導航標題欄隨頁面滾動漸隱漸顯效果的文章就介紹到這了,更多相關(guān)vue 導航標題欄滾動漸隱漸顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯誤問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue+flask實現(xiàn)視頻合成功能(拖拽上傳),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
Vue輸入框?qū)崟r驗證IP地址合法性并在下方進行提示功能實現(xiàn)
在Vue組件中的IP地址輸入框定義一個checkIpAddress方法,該方法使用正則表達式對傳入的IP地址進行驗證,這篇文章主要介紹了Vue輸入框?qū)崟r驗證IP地址合法性并在下方進行提示,需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關(guān)于vue+echarts實現(xiàn)折線圖的方法與注意事項，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-12-12
這篇文章主要介紹了vuex分模塊后,實現(xiàn)獲取state的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
使用vue-cli3 創(chuàng)建vue項目并配置VS Code 自動代碼格式化 vue語法高亮問題
這篇文章主要介紹了使用vue-cli3 創(chuàng)建vue項目，并配置VS Code 自動代碼格式化 vue語法高亮問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖形驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法
這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法,store是一個狀態(tài)管理工具,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05