我们来到郊外。啊，这是多美的 "绿毯 "呀！绿油油的，上面还挂着一颗颗晶莹的 "珍珠 "，太阳升起来， "珍珠 "就发出了彩虹似的光芒，不一会儿就消失了。我想：小 "珍珠 "一定是架起彩虹桥去太阳神的皇宫了。这时，一股股幽香扑入我的鼻中，好香啊，走，去瞧瞧。我们先来到一株红梅前，那梅花正开得灿烂，并且还散出阵阵清香。梅花的颜色也许只有九天的织女用早晨的红霞和晴午的白云在天机上织的轻绢，才可以比拟吧。我们又来到迎春花旁，迎春花正在开花。
项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的，下面作一个用vue实现此功能的代码分享。
1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。
<div class="header" :style="opacityStyle"> 景点详情 //内容我就简约了，实际开发以需求为准 </div>
2. data中定义opacityStyle，数据内容是opacity透明度属性，设置为0。
data() {
return {
opacityStyle:{ opacity:0 }
}
}
3. 监听scroll事件并执行相应方法，一般我习惯在activated生命周期时开始监听(activated是keepAlive属性下产生的一个生命周期，在进入页面时)。
activated(){
window.addEventListener('scroll',this.handleScroll)
}
4. 设计handleScroll()方法。通过获取scroll滚动偏移值，指定数值对opacity属性进行计算，让透明度联动变化。
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监听进行解绑。刚刚在activated()中执行监听，同样的我们在deactivated()中移除监听。这一步很重要，很多人都会忽略，如果不解除将可能影响到其他页面的scroll行为，导致项目产生bug。
deactivated(){
window.removeEventListener('scroll',this.handleScroll)
}
以上是vue实现页面滚动显隐导航栏功能的代码和逻辑，有疑惑例如keepAlive用法等不明白的地方可查看文档另外学习~
总结
到此这篇关于vue实现导航标题栏随页面滚动渐隐渐显效果的文章就介绍到这了,更多相关vue 导航标题栏滚动渐隐渐显内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
