vue实现导航标题栏随页面滚动渐隐渐显效果
(编辑:jimmy 日期: 2024/12/25 浏览:3 次 )
项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的,下面作一个用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用法等不明白的地方可查看文档另外学习~
总结
下一篇:three.js利用射线Raycaster进行碰撞检测