Question

我正在将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”）仅在安装期间执行，而该功能在页面滚动时永远不会执行

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

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

Working js fiddle

Vuejs2听页面滚动失败

1 个答案: