vue 滚动条触底时加载数据，如何防止短时间内重复加载

为了防止短时间内重复加载数据，可以使用一个变量来记录当前是否正在加载数据。在滚动条触底时，先判断这个变量是否为 true，如果是则说明当前正在加载数据，不再进行加载；如果不是，则将这个变量设置为 true，然后进行数据加载，并在加载完成后将变量重新设置为 false。

具体实现可以参考以下代码：

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="data-container" ref="dataContainer">
      <div v-for="item in dataList" :key="item.id">{{ item.text }}</div>
      <div v-if="isLoading">Loading...</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      isLoading: false
    }
  },
  mounted() {
    this.initScrollListener()
  },
  methods: {
    initScrollListener() {
      const scrollContainer = this.$refs.scrollContainer
      scrollContainer.addEventListener('scroll', () => {
        if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
          this.loadData()
        }
      })
    },
    async loadData() {
      if (this.isLoading) {
        return
      }
      try {
        this.isLoading = true
        const newDataList = await this.fetchData()
        this.dataList = [...this.dataList, ...newDataList]
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    },
    async fetchData() {
      // 执行数据加载逻辑，返回新的数据列表
    }
  }
}
</script>

在上面的代码中，我们使用了一个 isLoading 变量来记录当前是否正在加载数据。在 loadData 方法中，先判断这个变量是否为 true，如果是则直接返回，不再进行加载；如果不是，则将 isLoading 设置为 true，然后执行数据加载逻辑，并在加载完成后将 isLoading 重新设置为 false。这样就可以防止短时间内重复加载数据了。