vue 滚轮事件 debounce

在 Vue 中，你可以使用 `lodash` 库中的 `debounce` 函数来实现滚轮事件的防抖处理。首先，确保你已经在项目中安装了 `lodash` 库。

然后，在你的 Vue 组件中，可以按照以下步骤使用 `debounce` 函数来处理滚轮事件的防抖：

1. 导入 `lodash` 库中的 `debounce` 函数：

import { debounce } from 'lodash';

2. 在 `mounted` 钩子函数中，为滚轮事件绑定防抖处理函数：

mounted() {
  this.handleScroll = debounce(this.handleScroll, 200); // 200毫秒的防抖延迟
  window.addEventListener('scroll', this.handleScroll);
},

3. 在 `methods` 中定义滚轮事件的处理函数 `handleScroll`：

methods: {
  handleScroll() {
    // 处理滚轮事件的逻辑
    // ...
  },
},

这样，每次滚轮事件触发时，会延迟 200 毫秒触发 `handleScroll` 函数，从而实现了滚轮事件的防抖处理。记得在组件销毁时移除滚轮事件监听：

beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},

这样就完成了在 Vue 中使用 `debounce` 函数进行滚轮事件的防抖处理。