vue 滚动条 触底加载数据 scroll

<template>
  <div class="scroll-container" ref="scrollContainer" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 存放加载的数据
      loading: false, // 是否正在加载数据
    };
  },
  mounted() {
    // 初始化加载数据
    this.loadData();
  },
  methods: {
    handleScroll() {
      const container = this.$refs.scrollContainer;
      const scrollTop = container.scrollTop; // 滚动条距离顶部的距离
      const visibleHeight = container.clientHeight; // 可见区域的高度
      const scrollHeight = container.scrollHeight; // 滚动内容的总高度

      // 判断是否滚动到底部
      if (scrollTop + visibleHeight >= scrollHeight) {
        this.loadData();
      }
    },
    loadData() {
      // 如果正在加载数据，则直接返回
      if (this.loading) {
        return;
      }

      this.loading = true;

      // 模拟异步加载数据
      setTimeout(() => {
        // 假设从API加载了10条数据
        const newData = Array.from({ length: 10 }, (v, i) => ({
          id: i,
          name: `Item ${i}`,
        }));

        this.items.push(...newData);
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.scroll-container {
  height: 300px;
  overflow-y: scroll;
}
</style>