Question

Vuejs2监听页面滚动失败

2019-05-21

42

javascript vuejs2

我正在使用 vuejs2 和 codeigniter。

我已将以下内容添加到 html

<header id="test_header">
     my nav menu
</header>

在单独的 scripts.js 中我有

script.js

new Vue({
 el: '#test_header',
 data:function(){
  return{

  }
},
methods:{
    handleScroll(){
        console.log("on scroll");
    },
    listenScroll(){
        window.addEventListener("scroll", this.handleScroll);
    }
},
mounted() {
  this.listenScroll();
},
destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
}
});

我尝试监听滚动事件，但该函数仅执行一次。也就是说，console.log("on scroll") 仅在挂载期间执行，但页面滚动时永远不会执行该函数

我已按以下顺序在 html 中包含了 javascript 文件

<html> 
  <body> 
   <script src="vuejs.js"> //includes vuejs frameworks
   <script src="script.js"> ///includes above code
  </body>
 </html>

我遗漏了什么？

Answer 1

在 created() 中为滚动事件创建事件监听器

ex

created(){
    window.addEventListener("scroll", this.myFunction);
  }

此外，您的方法对象应如下所示：

{
  myFunction: function(){},
  anotherFunction: function(){}
}

工作中的 js fiddle