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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
node.js博客项目开发手记
Mar 16 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
基于JS判断对象是否是数组
Jan 10 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语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue如何判断dom的class
2018/04/26 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python os模块简单应用示例
2019/05/23 Python
Pytorch之contiguous的用法
2019/12/31 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
如何写自我鉴定
2014/03/19 职场文书
环保专项行动方案
2014/05/12 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
2014年就业工作总结
2014/11/26 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏