无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

绍兴微信小程序开发_vue完成导航标题栏随页面滚

时间:2021-01-05 15:28来源:绍兴微信小程序开发 作者:jianzhan 点击:
vue完成导航栏题目栏随网页页面翻转渐隐渐显实际效果 本文关键详细介绍了vue完成导航栏题目栏随网页页面翻转渐隐渐显实际效果,文中根据案例编码给大伙儿详细介绍的十分详尽
vue实现导航标题栏随页面滚动渐隐渐显效果       这篇文章主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

 div : 
 景点详情 //内容我就简约了,实际开发以需求为准
 /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 导航标题栏滚动渐隐渐显内容请搜索凡科以前的文章或继续浏览下面的 (责任编辑:admin)

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信