好资源导航 » 文章资讯 » vue实现导航标题栏随页面滚动渐隐渐显效果

vue实现导航标题栏随页面滚动渐隐渐显效果

2023-07-28 19:38:14 61

项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的，下面作一个用vue实现此功能的代码分享。

1.为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。


景点详情//内容我就简约了，实际开发以需求为准

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(){
consttop=document.documentElement.scrollTop//获取scroll偏移值
if(top>45&&top<=150){//实际按需求取范围
constopacity=top/150//对opacity作计算，透明度从起始到1随偏移值而改变
this.opacityStyle={opacity}//实时返回给opacityStyle
}
}
}

5.对scroll监听进行解绑。刚刚在activated()中执行监听，同样的我们在deactivated()中移除监听。这一步很重要，很多人都会忽略，如果不解除将可能影响到其他页面的scroll行为，导致项目产生bug。

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

以上是vue实现页面滚动显隐导航栏功能的代码和逻辑，有疑惑例如keepAlive用法等不明白的地方可查看文档另外学习~

总结

到此这篇关于vue实现导航标题栏随页面滚动渐隐渐显效果的文章就介绍到这了,更多相关vue导航标题栏滚动渐隐渐显内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue实现导航标题栏随页面滚动渐隐渐显效果

热门推荐

随机推荐