我是靠谱客的博主 贪玩豆芽,这篇文章主要介绍vue移动端监听滚动事件实现导航栏上滑隐藏下滑显示功能,现在分享给大家,希望可以做个参考。

场景描述:手机端的顶部导航栏 向上滑动隐藏 向下滑动显示。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scroll', this.handleScroll, true); // 监听(绑定)滚轮 滚动事件 }, methods:{ handleScroll(){ // 页面滚动距顶部距离 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var scroll = scrollTop - this.i; this.i = scrollTop; if(scroll<0){ console.log('up') //添加你想要的事件 }else{ //添加你想要的事件 console.log('down') } }, }

最后

以上就是贪玩豆芽最近收集整理的关于vue移动端监听滚动事件实现导航栏上滑隐藏下滑显示功能的全部内容,更多相关vue移动端监听滚动事件实现导航栏上滑隐藏下滑显示功能内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(59)

评论列表共有 0 条评论

立即
投稿
返回
顶部