Vue高性能列表GridList组件及实现思路详解

<script setup lang="ts">
import GridList, { RequestFunc } from '@/components/GridList.vue';
const data: RequestFunc<number> = ({ page, limit }) => {
  return new Promise((resolve) => {
    console.log('开始加载啦', page, limit);
    setTimeout(() => {
      resolve({
        data: Array.from({ length: limit }, (_, index) => index + (page - 1) * limit),
        total: 500,
      });
    }, 1000);
  });
};
</script>
<template>
  <GridList :request="data" :column-gap="20" :row-gap="20" :limit="100" :item-min-width="200" class="grid-list">
    <template #empty>
      <p>暂无数据</p>
    </template>
    <template #default="{ item }">
      <div class="item">{{ item }}</div>
    </template>
    <template #loading>
      <p>加载中...</p>
    </template>
    <template #noMore>
      <p>没有更多了</p>
    </template>
  </GridList>
</template>

<script setup lang="ts">
import GridList, { RequestFunc } from '@/components/GridList.vue';
const data: RequestFunc<number> = ({ page, limit }) => {
  return new Promise((resolve) => {
    console.log('开始加载啦', page, limit);
    setTimeout(() => {
      resolve({
        data: Array.from({ length: limit }, (_, index) => index + (page - 1) * limit),
        total: 500,
      });
    }, 1000);
  });
};
</script>
<template>
  <GridList :request="data" :column-gap="20" :row-gap="20" :limit="100" item-min-width="100%" class="grid-list">
    <template #empty>
      <p>暂无数据</p>
    </template>
    <template #default="{ item }">
      <div class="item">{{ item }}</div>
    </template>
    <template #loading>
      <p>加载中...</p>
    </template>
    <template #noMore>
      <p>没有更多了</p>
    </template>
  </GridList>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
const props = defineProps<{
  dataSource?: any[];
  itemMinWidth?: number;
  itemMinHeight?: number;
  rowGap?: number;
  columnGap?: number;
}>();
const data = ref<any[]>([...props.dataSource]);
</script>
<template>
  <div ref="containerRef" class="infinite-list-wrapper">
    <div v-else class="list">
      <div v-for="(item, index) in data" :key="index">
        <slot :item="item" :index="index">
          {{ item }}
        </slot>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.infinite-list-wrapper {
  text-align: center;
  overflow-y: scroll;
  position: relative;
  -webkit-overflow-scrolling: touch;
  .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(v-bind(itemMinWidth) * 1px), 1fr));
    grid-auto-rows: minmax(auto, calc(v-bind(itemMinHeight) * 1px));
    column-gap: calc(v-bind(columnGap) * 1px);
    row-gap: calc(v-bind(rowGap) * 1px);
    div:first-of-type {
      grid-column-start: 1;
      grid-column-end: 1;
    }
  }
}
</style>

export interface Pagination {
  limit: number;
  page: number;
}
export interface RequestResult<T> {
  data: T[];
  total: number;
}
export type RequestFunc<T> = (pagination: Pagination) => Promise<RequestResult<T>> | RequestResult<T>;

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
const props = defineProps<{
    request?: RequestFunc<any>;
    limit?: number;
    loadDistance?: number;
    //...原有props
  }>();
const containerRef = ref<HTMLDivElement>();
const loading = ref<boolean>(false);
const data = ref<any[]>([]);
const total = ref<number>(0);
const page = ref<number>(1);
/** 没有更多了 */
const noMore = computed<boolean>(
  () => total.value === 0 || data.value.length >= total.value || data.value.length < props.limit
);
//... watch处理
function handleScroll(event: Event) {
  event.preventDefault();
  const container = event.target as HTMLDivElement;
  const canLoad =
    container.scrollTop + container.clientHeight >= container.scrollHeight - props.loadDistance &&
    !loading.value &&
    !noMore.value;
  if (canLoad) {
    load();
  }
}
async function load() {
  loading.value = true;
  const result = await Promise.resolve(
    props.request({
      limit: props.limit,
      page: page.value,
    })
  );
  total.value = result.total;
  data.value.push(...result.data);
  if (!noMore.value) {
    page.value = page.value + 1;
  }
  loading.value = false;
}
</script>

//vue依赖引入
export const useVirtualGridList = ({
  containerRef,
  itemMinWidth,
  itemMinHeight,
  rowGap,
  columnGap,
  data,
}: VirtualGridListConfig) => {
  const phantomElement = document.createElement('div');
  //...phantomElement布局
  const containerHeight = ref<number>(0);
  const containerWidth = ref<number>(0);
  const startIndex = ref<number>(0);
  const endIndex = ref<number>(0);
  const startOffset = ref<number>(0);
  /** 计算列数 */
  const columnNum = computed<number>(
    () => Math.floor((containerWidth.value - itemMinWidth.value) / (itemMinWidth.value + columnGap.value)) + 1
  );
  /** 计算行数 */
  const rowNum = computed<number>(() => Math.ceil(data.value.length / columnNum.value));
  /** 计算总高度 */
  const listHeight = computed<number>(() =>
    Math.max(rowNum.value * itemMinHeight.value + (rowNum.value - 1) * rowGap.value, 0)
  );
  /** 可见行数 */
  const visibleRowNum = computed<number>(
    () => Math.ceil((containerHeight.value - itemMinHeight.value) / (itemMinHeight.value + rowGap.value)) + 1
  );
  /** 可见item数量 */
  const visibleCount = computed<number>(() => visibleRowNum.value * columnNum.value);
  watch(
    () => listHeight.value,
    () => {
      phantomElement.style.height = `${listHeight.value}px`;
    }
  );
  watchEffect(() => {
    endIndex.value = startIndex.value + visibleCount.value;
  });
  const handleContainerResize = () => {
    nextTick(() => {
      if (containerRef.value) {
        containerHeight.value = containerRef.value.clientHeight;
        containerWidth.value = containerRef.value.clientWidth;
      }
    });
  };
  const handleScroll = () => {
    if (!containerRef.value) {
      return;
    }
    const scrollTop = containerRef.value.scrollTop;
    const startRowNum = Math.ceil((scrollTop - itemMinHeight.value) / (itemMinHeight.value + rowGap.value));
    /** 计算起始索引 */
    startIndex.value = startRowNum * columnNum.value;
    /** 计算内容偏移量 */
    startOffset.value = scrollTop - (scrollTop % (itemMinHeight.value + rowGap.value));
  };
  onMounted(() => {
    if (containerRef.value) {
      containerRef.value.appendChild(phantomElement);
      containerRef.value.addEventListener('scroll', (event: Event) => {
        event.preventDefault();
        handleScroll();
      });
      handleScroll();
    }
  });
  return { startIndex, endIndex, startOffset, listHeight };
};

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useVirtualGridList } from '@/hooks/useVirtualGridList';
//...其他代码
/** 计算最小宽度的像素值 */
const itemMinWidth = computed<number>(() => props.itemMinWidth);
/** 计算最小高度的像素值 */
const itemMinHeight = computed<number>(() => props.itemMinHeight);
/** 计算列间距的像素值 */
const columnGap = computed<number>(() => props.columnGap);
/** 计算行间距的像素值 */
const rowGap = computed<number>(() => props.rowGap);
/** 计算虚拟列表的起始/终止索引 */
const { startIndex, endIndex, startOffset, listHeight } = useVirtualGridList({
  containerRef,
  data,
  itemMinWidth,
  itemMinHeight,
  columnGap,
  rowGap,
});
//...其他代码
</script>
<template>
  <div ref="containerRef" class="infinite-list-wrapper" @scroll="handleScroll">
    <div v-if="data.length === 0 && !loading">
      <slot name="empty">No Data</slot>
    </div>
    <div v-else class="list">
      <div v-for="(item, index) in data.slice(startIndex, endIndex)" :key="index">
        <slot :item="item" :index="index">
          {{ item }}
        </slot>
      </div>
    </div>
    <div v-if="loading" class="bottom">
      <slot name="loading"></slot>
    </div>
    <div v-if="noMore && data.length > 0" class="bottom">
      <slot name="noMore"></slot>
    </div>
  </div>
</template>