vue实现滚动触发

在 Vue 中，可以通过监听滚动事件来实现滚动触发的效果。具体方法如下：

在需要监听滚动事件的元素中添加一个 scroll 事件的监听器。

html
<template>
  <div class="scroll-container" @scroll="handleScroll">
    ...
  </div>
</template>

在对应的组件中定义 handleScroll() 方法。

javascript
export default {
  data() {
    return {
      // 初始化状态变量
      isScrolling: false,
      scrollTop: 0,
    };
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop;
      if (!this.isScrolling) {
        // 开始滚动时设置为true，避免滚动过程中重复触发
        this.isScrolling = true;
        // 调用防抖函数，执行回调函数
        this.debounce(this.handleScrollEnd, 1000)();
      }
    },
    handleScrollEnd() {
      console.log('滚动结束，当前滚动位置：', this.scrollTop);
      // 滚动结束后将状态设回false，准备下一次滚动
      this.isScrolling = false;
    },
    debounce(fn, delay) {
      let timerId;
      return function(...args) {
        // 如果定时器还存在，清除定时器
        if (timerId) {
          clearTimeout(timerId);
        }
        // 注册新的定时器，延迟执行回调函数
        timerId = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    },
  },
};

在上述示例代码中，如果监听到滚动事件后，先将 scrollTop 变量更新为当前的滚动位置，然后利用防抖函数来实现滚动结束时再执行回调函数的效果。

需要注意的是，在开发和调试过程中，要小心处理滚动事件的频率和效率问题，避免在大量滚动时导致页面卡顿或出现其他不必要的问题。