vue实现滚动触发-Toy模板网

这篇具有很好参考价值的文章主要介绍了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);
      };
    },
  },
};