Vue3 仅 30 行代码教你实现无限列表，轻松应对海量数据显示！

前端

2023-06-24 02:56:16

Vue3 无限列表函数：实现和最佳实践

概述

无限列表在现代 Web 应用程序中无处不在，它们允许用户在不手动分页的情况下加载更多数据。在本文中，我们将深入探讨如何使用 Vue3 实现一个通用且可复用的无限列表函数，并介绍最佳实践以确保其高效和响应式。

实现 Vue3 无限列表函数

工作原理

无限列表基于虚拟化概念，仅渲染用户可见的数据，从而优化性能。当用户滚动接近列表底部时，加载更多数据。

实现

为了实现无限列表函数，我们使用以下步骤：

监听滚动事件： 添加一个滚动事件监听器，当用户接近列表底部时触发。
判断是否需要加载更多数据： 检查滚动位置与列表高度的关系，如果达到阈值（例如列表底部的 100 像素），则触发加载更多。
加载更多数据： 调用一个函数来获取新数据并将其添加到现有列表中。

最佳实践

使用虚拟化库： Vue VirtualScroller 等库通过提供开箱即用的虚拟化功能，简化了无限列表的实现。

优化数据获取： 实现服务器端分页或使用延迟加载来优化数据获取。

管理加载状态： 使用加载状态指示符告知用户数据正在加载，并处理错误或超时情况。

响应式设计： 确保无限列表函数在不同设备和屏幕尺寸上都能正常工作。

代码示例

import { ref, onMounted, onUnmounted } from 'vue';

export default function useInfiniteList(options) {
  const {
    data, // 数据源
    itemHeight, // 每一项的高度
    threshold = 100, // 距离底部多少像素开始加载更多数据
    load = () => {}, // 加载更多数据的函数
  } = options;

  const listRef = ref(null);
  const loading = ref(false);
  const reachedBottom = ref(false);
  let startIndex = 0;
  let endIndex = 0;

  const handleScroll = (e) => {
    if (loading.value || reachedBottom.value) {
      return;
    }

    const list = listRef.value;
    const scrollTop = e.target.scrollTop;
    const scrollHeight = list.scrollHeight;
    const clientHeight = list.clientHeight;
    if (scrollHeight - scrollTop - clientHeight < threshold) {
      loading.value = true;
      load().then(() => {
        loading.value = false;
        startIndex = endIndex;
        endIndex += data.value.length;
        if (endIndex >= data.value.length) {
          reachedBottom.value = true;
        }
      });
    }
  };

  onMounted(() => {
    const list = listRef.value;
    list.addEventListener('scroll', handleScroll);
  });

  onUnmounted(() => {
    const list = listRef.value;
    list.removeEventListener('scroll', handleScroll);
  });

  return {
    listRef,
    loading,
    reachedBottom,
  };
}

使用示例

import { useInfiniteList } from './useInfiniteList';

export default {
  setup() {
    const data = ref([]);
    const { listRef, loading, reachedBottom } = useInfiniteList({
      data,
      itemHeight: 50,
      load: () => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const newData = [...data.value];
            for (let i = 0; i < 10; i++) {
              newData.push(`Item ${data.value.length + i + 1}`);
            }
            data.value = newData;
            resolve();
          }, 1000);
        });
      },
    });

    return {
      listRef,
      loading,
      reachedBottom,
      data,
    };
  },
  template: `
    <div>
      <div ref="listRef" class="list">
        <div v-for="item in data" :key="item">{{ item }}</div>
      </div>
      <div v-if="loading">正在加载...</div>
      <div v-if="reachedBottom">没有更多数据了</div>
    </div>
  `,
};