vuejs2收听页面滚动失败

AM使用VueJS2与CodeIgniter。

我已将以下内容添加到HTML

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

在一个单独的脚本中，我有

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>

我缺少什么？

在 created()

中创建滚动事件的事件侦听器

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

您的方法对象应该看起来像：

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

工作Js小提琴

相关内容

最新更新

热门标签：