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和GOOGLE Search Api整合实现代码
Jul 18 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue实现购物车的监听
Apr 20 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
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
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python 中的with关键字使用详解
2016/09/11 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python 从相对路径下import的方法
2018/12/04 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
专业技术职务聘任书
2014/03/29 职场文书
企业读书活动总结
2014/06/30 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python