vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁(yè)面滾動(dòng)漸隱漸顯效果
項(xiàng)目開發(fā)中導(dǎo)航欄隨頁(yè)面滾動(dòng)漸隱漸顯這一功能還是較為常用的，下面作一個(gè)用vue實(shí)現(xiàn)此功能的代碼分享。
1. 為導(dǎo)航欄元素style屬性用v-bind綁定data數(shù)據(jù)"opacityStyle"。
<div class="header" :style="opacityStyle"> 景點(diǎn)詳情 //內(nèi)容我就簡(jiǎn)約了，實(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)入頁(yè)面時(shí))。
activated(){
window.addEventListener('scroll',this.handleScroll)
}
4. 設(shè)計(jì)handleScroll()方法。通過(guò)獲取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ì)忽略，如果不解除將可能影響到其他頁(yè)面的scroll行為，導(dǎo)致項(xiàng)目產(chǎn)生bug。
deactivated(){
window.removeEventListener('scroll',this.handleScroll)
}
以上是vue實(shí)現(xiàn)頁(yè)面滾動(dòng)顯隱導(dǎo)航欄功能的代碼和邏輯，有疑惑例如keepAlive用法等不明白的地方可查看文檔另外學(xué)習(xí)~
總結(jié)
到此這篇關(guān)于vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁(yè)面滾動(dòng)漸隱漸顯效果的文章就介紹到這了,更多相關(guān)vue 導(dǎo)航標(biāo)題欄滾動(dòng)漸隱漸顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來(lái)探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫(kù)嵌入PDF文檔吧2023-08-08
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用
Vuex是實(shí)現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機(jī)制,可以方便的實(shí)現(xiàn)組件之間數(shù)據(jù)的共享,數(shù)據(jù)緩存等等,下面這篇文章主要給大家介紹了關(guān)于Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue 實(shí)現(xiàn)簡(jiǎn)易多行滾動(dòng)"彈幕"效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)簡(jiǎn)易多行滾動(dòng)“彈幕”效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue?@click?@tap重疊事件區(qū)分方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue仿淘寶訂單狀態(tài)tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue中漸進(jìn)過(guò)渡效果實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue中漸進(jìn)過(guò)渡效果的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue-property-decorator的簡(jiǎn)單知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個(gè)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于vue v-for 循環(huán)復(fù)選框-默認(rèn)勾選第一個(gè)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue插件vue-resource的使用筆記（小結(jié)）
本篇文章主要介紹了vue插件vue-resource的使用筆記（小結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08