javascript - 如何监听VueJS组件中的窗口滚动事件？

Question

我想在我的 Vue 组件中监听窗口滚动事件。到目前为止，这是我尝试过的:

<my-component v-on:scroll="scrollFunction">
    ...
</my-component>

在我的组件方法中定义了 scrollFunction(event) 但它似乎不起作用。

有人知道怎么做吗？

谢谢!

Answer 1

其实我找到了解决办法。我在创建组件时在 scroll 事件上添加一个事件监听器，并在销毁组件时删除事件监听器。

export default {
  created () {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll (event) {
      // Any code to be executed when the window is scrolled
    }
  }
}

希望这对您有所帮助!