窗口滚动顶部栏隐藏
作者:互联网
一般顶部栏是全局组件,需要继承组件里的事件
main.js文件,创建事件处理中心
// 建立一个时间处理中心 // $emit发出 // $on监听 // $off销毁 Vue.prototype.$EventBus = new Vue()
需要滚动隐藏顶部栏的页面
methods:{ handleScroll() { this.$EventBus.$emit('navShowHideEvent') } }, mounted(){ window.addEventListener('scroll', this.handleScroll()) }
顶部栏组件需要this.$EventBus.$on进行监听,之后就是对scroll参数的判断,console发现他是滚动的位置到顶部的距离,进行判断就能实现下拉隐藏了,也可以做到上拉立即显示的效果
标签:Vue,滚动,顶部,handleScroll,组件,EventBus,隐藏 来源: https://www.cnblogs.com/black-eyes/p/14966541.html