vue监听滚动事件,控制页面元素显示隐藏

2022年05月10日 阅读数:17
这篇文章主要向大家介绍vue监听滚动事件,控制页面元素显示隐藏,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

methods中定义监听事件

// 窗口滚动监听事件
windowScrollListener(){
   
   
     // 获取滚动条的高度
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     if(scrollTop >= 600){
   
   
     	 // 利用布尔值控制元素的显隐
         this.leftMenuVisible = true;
     }
     if(scrollTop < 600){
   
   
         this.leftMenuVisible = false;
     }
 }

在creatd中给window添加滚动事件的监听

created () {
   
   
    // 给窗口绑定滚动监听事件
    window.addEventListener('scroll',this.windowScrollListener); 
},

在销毁页面时,移除事件的监听

destroyed () {
   
   
     // 移除事件监听
     window.removeEventListener('scroll', this.windowScrollListener)
 }