「短文」如何在 Vue 中创建自定义滚动事件

您可以使用自定义指令在 Vue 中处理滚动。下面是一个打印 window.scrollY 的当前值的 Vue 实例。向下滚动，对应的数值增加。

下面是 JavaScript 代码。调用 Vue.directive(‘scroll’) 会注册一个 v-scroll 指令，您可以在 HTML 模板中使用该指令。 binding.value 包含 v-scroll 属性的计算值。在下面的例子中， binding.value 指向 handleScroll() 方法。

Vue.directive('scroll', {
  inserted: function (el, binding) {
    const onScrollCallback = binding.value; 
    window.addEventListener('scroll', () => onScrollCallback());
  }
});
// main app
new Vue({
  el: '#app',
  data: {
    value: 0
  },
  methods: {
    handleScroll: function() {
      this.value = window.scrollY;
    }
  }
});

下面是 HTML 模板。注意 v-scroll 指令需要传递函数。

<div id="app">
  <h1>Scroll and Watch</h1>
  <div v-scroll="handleScroll">
    <p>The value of <code>window.scrollY</code>: {{ value }}!</p>
  </div>
</div>

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载