vue 滚动加载阻止触发了多次，代码怎么写

为了防止滚动加载事件触发多次，可以考虑在滚动事件中加入一个节流函数或者防抖函数，限制其触发次数。以下是一个基于防抖函数的示例代码：

<template>
  <div class="container" ref="scrollContainer" @scroll="handleScroll">
    <!-- 滚动列表内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false, // 是否正在加载数据
      page: 1, // 当前页数
      pageSize: 10, // 每页数据量
    };
  },
  methods: {
    handleScroll: _.debounce(function() {
      // 当滚动到底部时触发加载事件
      const container = this.$refs.scrollContainer;
      if (
        container.scrollTop + container.clientHeight >=
        container.scrollHeight
      ) {
        if (!this.isLoading) {
          this.loadMoreData();
        }
      }
    }, 500), // 设置防抖时间为 500ms
    async loadMoreData() {
      try {
        this.isLoading = true;
        const res = await fetchData(this.page, this.pageSize);
        this.page++;
        // 处理数据
        this.isLoading = false;
      } catch (error) {
        console.error(error);
        this.isLoading = false;
      }
    },
  },
};
</script>

在上述代码中，我们使用了 Lodash 库提供的 `_.debounce` 函数对 `handleScroll` 函数进行防抖处理，防止其在短时间内重复触发。当滚动到底部时，会触发 `loadMoreData` 函数来加载更多数据。在数据加载过程中，我们将 `isLoading` 标志设置为 `true`，避免重复加载。当数据加载完成后，将 `isLoading` 标志设置为 `false`，以便再次触发滚动加载事件。