DDR爱好者之家 Design By 杰米
项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的,下面作一个用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用法等不明白的地方可查看文档另外学习~
总结
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- 缇ゆ槦銆婁箻椋庤笍娴?鐢佃鍓т笓杈戙€媅320K/MP3][40.16MB]
- dnf游牧之国是哪年的
- dnf煤气罐是哪个副本的场景道具
- dnf熊猫套装怎么获得
- MichaelBarenboim,NataliaPegarkova-Barenboim-Mendelssohn_LiederohneWorte(2024)[24-96]fla
- LondonChoralSinfonia-VaughanWilliams_Retrospect(2024)[WAV+CUE]
- 赵传2021-老不休[诗宜文化][WAV+CUE]
- 外媒盘点顶级精细游戏TOP5:《荒野大镖客:救赎2》登顶
- 官方发布《星刃》爆发技能介绍:次元斩切碎强敌
- 《百英雄传》M站均分78:值得一试的复古佳作
- 麻园诗人.2022-闭上眼睛的声音【博山娱乐】【FLAC分轨】
- 任贤齐.1997-很受伤【滚石】【WAV+CUE】
- 群星.1998-还珠格格·苍天有泪琼瑶大卖连续剧全纪录EP【上华】【WAV+CUE】
- dnf燃烧疲劳值什么意思
- dnf男大枪110版本装备搭配