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


Posted in Javascript onMarch 12, 2020

项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的,下面作一个用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 导航标题栏滚动渐隐渐显内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JavaScript中string对象
Jun 12 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
js canvas实现擦除动画
Jul 16 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
javascript实现下雨效果
Mar 27 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
three.js利用射线Raycaster进行碰撞检测
Mar 12 #Javascript
JS实现碰撞检测效果
Mar 12 #Javascript
使用JS实现动态时钟
Mar 12 #Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 #Javascript
js实现动态时钟
Mar 12 #Javascript
package.json各个属性说明详解
Mar 11 #Javascript
package.json中homepage属性的作用详解
Mar 11 #Javascript
You might like
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
python中pycurl库的用法实例
2014/09/30 Python
python实现复制整个目录的方法
2015/05/12 Python
python中PIL安装简单教程
2016/04/21 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
个人安全生产承诺书
2014/05/22 职场文书
作风建设年度心得体会
2014/10/29 职场文书
婚前保证书范文
2015/02/28 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL