首页 > 其他 > 详细

窗口滚动顶部栏隐藏

时间:2021-07-03 17:03:15      阅读:16      评论:0      收藏:0      [点我收藏+]

一般顶部栏是全局组件,需要继承组件里的事件

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发现他是滚动的位置到顶部的距离,进行判断就能实现下拉隐藏了,也可以做到上拉立即显示的效果

窗口滚动顶部栏隐藏

原文:https://www.cnblogs.com/black-eyes/p/14966541.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!