Vue实现滚动加载更多效果

引言

在现代Web应用中，处理大量数据的展示是一个常见的挑战。无论是社交媒体的时间线、电商平台的商品列表，还是新闻网站的文章流，如何高效地加载和渲染大量内容，同时保持良好的用户体验，是开发者需要解决的关键问题。传统的做法是将所有数据一次性加载到页面上，但这会导致页面加载缓慢、内存占用过高，甚至影响浏览器的响应速度。为了解决这些问题，滚动加载更多（Infinite Scroll） 和 虚拟列表（Virtual List） 成为了流行的解决方案。

两种方案的介绍以及区别

1. 滚动加载更多（Infinite Scroll） ：

   • 工作原理：滚动加载更多通过分页的方式工作。当用户滚动到页面底部或接近底部时，系统会触发一个新的请求，获取下一页的数据，并将其动态添加到现有内容的末尾。这种方式允许用户在不中断浏览的情况下，无缝加载更多内容。
   • 优点：实现简单，用户体验流畅，减少了初始加载时间。
   • 缺点：随着用户不断滚动，页面上的DOM元素会逐渐增加，可能导致内存占用过高，影响性能。对于非常大的数据集，滚动加载更多可能会导致页面变得非常沉重，影响用户体验。

2. 虚拟列表（Virtual List） ：

   • 工作原理：虚拟列表的核心思想是只渲染当前视口（即用户可以看到的部分）中的内容，而不是一次性将所有数据加载到DOM中。当用户滚动时，虚拟列表会动态地更新DOM，确保只有可见区域的内容被渲染。此外，虚拟列表通常会复用DOM节点，进一步减少DOM操作的开销。
   • 优点：即使数据量非常大，虚拟列表也能保持良好的性能，因为它只渲染可见区域的内容。它还非常适合处理海量数据，避免了内存占用过高的问题。
   • 缺点：实现相对复杂，尤其是需要处理滚动事件、DOM复用、边界条件等。通常建议使用现成的库（如 vue-virtual-scroller、react-window 等）来简化开发过程。

滚动加载更多的实现

使用@scroll

1. 实现

通过监听滚动条的变化来更新页码，实现加载更多效果;代码里面有注释，我就不多说啦。需要注意的是父盒子的高度很重要。

以下是代码（但是先别拿去用，因为还有重要的优化）

<template>
  <div class="color-squares" @scroll="handleScroll">
    <!-- 这里我使用的是一个数字并非是一个数组，如果使用的是数组的话可将size换成arr.slice(0,size)（arr是你的数组）; -->
    <div v-for="(item, index) in size" :key="index" class="square">
      {
  { item }}
    </div>
    <!-- 末尾方式加载状态，这里我使用的时t-design（腾讯组件库） -->
    <t-loading :loading="loading" text="正在加载更多..." />
  </div>
</template>

<script setup>
import {
    ref, onMounted, computed } from "vue";
//总数据量
const total = ref(15);
//我们手动模拟分页效果,
const pageSize = ref(5);
const pageNum = ref(1);
const loading = ref(false);
//使用计算属性来更改size的值。通过滚动来更改pageNum（页码）。
const size = computed(() => {
   
  return pageNum.value * pageSize.value > total
    ? total
    : pageNum.value * pageSize.value;
});
//加载更多函数，注意里面的打印信息。