vue3 - 如何实现一个无限滚动列表，并分页加载？

Question

列表中的数据是变化的，所以在实现无限滚动的同时，也要请求新的数据，这样的无限滚动怎么实现呢？现在的开发环境是vue3的，从1滚动到最后一个后，再从1开始滚动,自动滚动，不需要滚动条!当数据不足5条的时候不需要滚动

Answer 1

https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll

这个符合你的要求吗？

Answer 2

<template>
  <div class="card-list">
    <div class="card-item" v-for="(item, index) in list">
        {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const rbTimer = ref(null);
const totalList = ref([
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
]);
const list = ref([1, 2, 3, 4, 5]);
const pageSize = 5; // 每页显示的条数
let currentPage = 1; // 当前页码

onMounted(() => {
  const cardList = document.getElementsByClassName("card-list")[0];
  if (totalList.value.length > pageSize) {
    rbTimer.value = scroll(cardList);
  }
});

const scroll = (tableDom) => {
  let isScroll = true;
  tableDom.addEventListener("mouseover", () => {
    isScroll = false;
  });
  tableDom.addEventListener("mouseout", () => {
    isScroll = true;
  });
  return setInterval(() => {
    if (isScroll) {
      tableDom.scrollTop += 3; // 设置滚动速度
      if (
        Math.abs(tableDom.clientHeight + tableDom.scrollTop - tableDom.scrollHeight) <= 2
      ) {
        if (list.value.length === totalList.value.length) {
          tableDom.scrollTop = 0;
        }
        setTimeout(loadNextPage, 500); // 延迟500毫秒加载下一页数据
      }
    }
  }, 100);
};

const loadNextPage = () => {
  if (currentPage * pageSize < totalList.value.length) {
    currentPage++;
    list.value =[...list.value, ...totalList.value.slice(
      (currentPage - 1) * pageSize,
      currentPage * pageSize
    )];
  }
};
</script>

<style>
.card-list {
  height: 100px;
  overflow-y: auto;
  overflow: scroll;
}

.card-list::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.card-item{
  line-height: 40px;
}

.card-item:nth-child(odd) {
  height: 40px;
  background: #20a6ff;
}

.card-item:nth-child(even) {
  height: 40px;
  background:#19daf9;
}
</style>

Answer 3

### 实现无限滚动列表并分页加载（Vue 3）

要在 Vue 3 中实现一个无限滚动列表并分页加载数据，同时考虑数据的变化和循环滚动，你可以按照以下步骤进行：

1. **设置基本结构**：
   - 使用 Vue 3 的组合式 API。
   - 创建一个用于存储数据的数组 `items`。
   - 创建一个当前页码 `currentPage` 和每页显示的项目数量 `pageSize`。

2. **实现滚动监听**：
   - 使用 `onMounted` 和 `onUnmounted` 生命周期钩子来添加和移除滚动事件监听器。
   - 在滚动事件处理函数中，检查是否滚动到底部，如果是，则加载更多数据。

3. **数据请求**：
   - 使用一个函数 `fetchData` 来模拟从服务器获取数据。
   - 每次滚动到底部时，调用 `fetchData` 并更新 `items` 数组。

4. **处理数据变化**：
   - 在数据加载后，合并新数据到 `items` 数组中。
   - 如果有必要，处理数据去重或更新逻辑。

5. **实现循环滚动**：
   - 在滚动到底部并加载新数据后，如果数据数量足够多，可以通过调整滚动位置来实现循环效果。
   - 例如，可以在加载新数据后，立即将滚动位置重置到顶部。

### 示例代码

<template>
<div @scroll="handleScroll" class="infinite-scroll-container" ref="scrollContainer">

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

</div>
</template>

<script>
import { ref, onMounted, onUnmounted, reactive } from 'vue';

export default {
setup() {

const items = reactive([]);
const currentPage = ref(1);
const pageSize = 10;
const scrollContainer = ref(null);

const fetchData = async (page) => {
  // 模拟从服务器获取数据
  const newData = Array.from({ length: pageSize }, (_, i) => ({
    id: (page - 1) * pageSize + i + 1,
    name: `Item ${(page - 1) * pageSize + i + 1}`,
  }));
  return newData;
};

const loadMoreData = async () => {
  const newItems = await fetchData(currentPage.value);
  items.push(...newItems);
  currentPage.value += 1;
  
  // 循环滚动：重置滚动位置到顶部
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = 0;
  }
};

const handleScroll = () => {
  const bottomOfWindow =
    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop ===
    scrollContainer.value.clientHeight;
  if (bottomOfWindow) {
    loadMoreData();
  }
};

onMounted(() => {
  // 初始加载第一页数据
  loadMoreData();
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

return {
  items,
  scrollContainer,
};

},
};
</script>

<style>
.infinite-scroll-container {
height: 300px; / 设置容器高度以启用滚动 /
overflow-y: auto;
border: 1px solid #ccc;
}
</style>

### 解释
- **模板部分**：使用 `v-for` 指令渲染列表项，并在 `div` 容器上监听滚动事件。
- **脚本部分**：
  - 使用 `reactive` 管理 `items` 数组。
  - 使用 `ref` 管理当前页码、每页大小和滚动容器引用。
  - `fetchData` 函数模拟数据获取。
  - `loadMoreData` 函数加载更多数据并处理循环滚动逻辑。
  - `handleScroll` 函数检查是否滚动到底部并调用 `loadMoreData`。
  - 在 `onMounted` 中初始加载数据并添加滚动事件监听器，在 `onUnmounted` 中移除监听器。
- **样式部分**：设置容器高度和滚动条样式。

这个示例提供了一个基本框架，你可以根据实际需求进行扩展和优化，比如处理数据更新、去重、错误处理等。