vue实现滚动下拉加载更多

在 Vue 项目中实现滚动下拉加载更多功能，可以通过以下步骤完成：

1. 确定需求

• 当页面滚动到一定位置时，触发加载更多数据的操作。
• 避免频繁触发请求，可以使用节流或防抖。

2. 基本实现

（1）HTML 结构

确保页面有一个可以滚动的容器：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="allLoaded" class="end">没有更多内容了</div>
  </div>
</template>

（2）CSS 样式

设置容器可滚动：

.scroll-container {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

ul {
  list-style: none;
  padding: 0;
}

.loading, .end {
  text-align: center;
  padding: 10px 0;
}

（3）Vue 逻辑

实现滚动检测和数据加载：

<script>
export default {
  data() {
    return {
      items: [], // 数据列表
      loading: false, // 是否正在加载
      allLoaded: false, // 是否加载完成
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
    };
  },
  mounted() {
    // 初始化加载数据
    this.loadMore();
  },
  methods: {
    // 滚动事件处理
    handleScroll(event) {
      const container = event.target;
      const scrollTop = container.scrollTop; // 已滚动距离
      const scrollHeight = container.scrollHeight; // 滚动内容高度
      const clientHeight = container.clientHeight; // 可视区域高度

      // 如果滚动到底部，并且没有在加载中
      if (scrollTop + clientHeight >= scrollHeight - 10 && !this.loading && !this.allLoaded) {
        this.loadMore();
      }
    },
    // 加载更多数据
    async loadMore() {
      this.loading = true;
      try {
        const newItems = await this.fetchData(this.page, this.pageSize);
        if (newItems.length < this.pageSize) {
          this.allLoaded = true; // 如果返回的数据不足一页，标记为全部加载
        }
        this.items = [...this.items, ...newItems];
        this.page++;
      } catch (error) {
        console.error('加载失败:', error);
      } finally {
        this.loading = false;
      }
    },
    // 模拟异步数据获取
    fetchData(page, pageSize) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const start = (page - 1) * pageSize;
          const end = start + pageSize;
          const newItems = Array.from({ length: Math.min(pageSize, 50 - start) }, (_, i) => ({
            id: start + i + 1,
            text: `第 ${start + i + 1} 条数据`,
          }));
          resolve(newItems);
        }, 1000);
      });
    },
  },
};
</script>

3. 代码解析

• 滚动检测：@scroll 绑定到滚动容器，实时检测滚动位置。
• 加载数据：loadMore 负责加载新数据并更新 items，同时更新状态 loading 和 allLoaded。
• 模拟异步：fetchData 模拟了一个异步获取数据的接口。

4. 优化

（1）节流防抖

防止滚动事件触发频率过高：

import throttle from 'lodash/throttle';

methods: {
  handleScroll: throttle(function(event) {
    // 滚动逻辑
  }, 200),
}

（2）骨架屏

加载时显示占位内容，提升用户体验。

（3）接口对接

实际开发中，将 fetchData 替换为真实的接口调用。

5. 注意事项

• 确保容器的 overflow-y 为 auto 或 scroll。
• 滚动到容器底部时的边界判断要考虑浮点误差（>= scrollHeight - 10）。
• 控制状态，防止重复加载。