Vue实现监听某个元素滚动,亲测有效

为了讲解方便，我将整个攻略分为以下几个部分：

1. 安装Vue.js依赖

在开始使用Vue.js之前，我们需要先安装它的依赖。我们可以使用npm或yarn来安装，具体步骤如下：

使用npm安装

npm install vue --save

使用yarn安装

yarn add vue

1. 创建Vue实例

在安装好Vue.js依赖后，我们可以开始创建Vue实例了。在实例化Vue之前，我们需要引入Vue依赖，然后在创建Vue实例时传入元素选择器和一个对象。

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {},
  ...
});

在上面的代码中，我们传入了一个元素选择器#app和一个空的对象。在实际应用中，我们需要根据具体需求设置相应的属性，例如data、methods、computed、watch等等。

1. 绑定监听事件

当Vue实例创建完毕后，我们可以在mounted钩子函数中绑定监听事件。Vue.js提供了许多钩子函数，mounted钩子函数是在Vue实例挂载到HTML文档上后执行的函数。

在mounted钩子函数中，我们需要获取需要监听的元素，并为其绑定scroll事件。为了避免在多个组件中重复代码，我们可以将监听事件封装成一个自定义的指令v-scroll。

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    };
    window.addEventListener('scroll', f);
  }
});

在上面的代码中，我们使用Vue.js提供的directive方法定义了名为scroll的自定义指令。定义自定义指令需要传入一个对象，并包含至少一个钩子函数，在这里我们使用了inserted钩子函数。此函数将在绑定元素插入到父节点时执行。

1. 使用自定义指令

在定义自定义指令之后，我们就可以在对应的HTML元素上使用自定义指令了。例如，在需要监听滚动信息的元素上，添加v-scroll指令，并传入对应的函数即可。

<div v-scroll="handleScroll">
  ...
</div>

在上面的代码中，我们使用了自定义指令v-scroll，并传入了一个名为handleScroll的函数。当监听到该元素发生滚动事件时，会自动调用该函数。

下面，我给出两个完整的示例。

示例一：监听页面滚动事件

我们在页面中添加一个带有滚动条的元素，然后监听其滚动事件并输出当前滚动位置。

<template>
  <div>
    <div class="scrollable" v-scroll="handleScroll">
      <div class="content" :style="{ 'height': contentHeight }"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        contentHeight: '2000px'
      };
    },
    directives: {
      scroll: {
        inserted(el, binding) {
          let f = function (evt) {
            binding.value(evt, el);
          };
          el.addEventListener('scroll', f);
        }
      }
    },
    methods: {
      handleScroll(evt, el) {
        console.log('scroll top:', el.scrollTop);
      }
    }
  };
</script>

在上面的代码中，我们定义了一个名为handleScroll的函数，用于输出当前滚动位置。在滚动事件发生时，该函数会被自动调用，然后我们在控制台输出滚动位置。

示例二：监听子元素滚动事件

接下来，我们将监听滚动事件的逻辑封装成一个组件，并展示如何监听嵌套的子元素滚动事件。

<template>
  <div>
    <div class="scrollable" v-scroll="handleScroll">
      <div class="content" :style="{ 'height': contentHeight }">
        <div v-for="item in items" :key="item.id" class="item">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        contentHeight: '100px',
        items: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
          { id: 3, name: 'Item 3' },
          { id: 4, name: 'Item 4' },
          { id: 5, name: 'Item 5' },
          { id: 6, name: 'Item 6' },
          { id: 7, name: 'Item 7' },
          { id: 8, name: 'Item 8' },
          { id: 9, name: 'Item 9' },
          { id: 10, name: 'Item 10' }
        ]
      };
    },
    directives: {
      scroll: {
        inserted(el, binding) {
          let child = el.querySelector('.content');
          let f = function (evt) {
            binding.value(evt, el, child);
          };
          child.addEventListener('scroll', f);
        }
      }
    },
    methods: {
      handleScroll(evt, el, child) {
        if (child.scrollHeight - child.scrollTop === child.clientHeight) {
          console.log('reach bottom');
        }
      }
    }
  };
</script>

在上面的代码中，我们定义了一个名为handleScroll的函数，在滚动到列表底部时输出'reach bottom'。为了监听子元素滚动事件，我们使用querySelector方法获取到了子元素。然后，在handleScroll中判断子元素是否滑到底部，若是，则输出'reach bottom'。