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)
 } 

你可能感兴趣的:(vue)