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 变量更新为当前的滚动位置，然后利用防抖函数来实现滚动结束时再执行回调函数的效果。

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