useLoadMore 加载更多

useLoadMore 是一个用于实现加载更多功能的 Hook，它提供了分页加载、加载状态管理等功能。（此功能仅提供请求的一些通用状态，具体滚动还是点击加载更多由你自己决定）

点击加载更多

最大条数40

复制代码

查看代码

<template>
  <div class="demo-wrapper">
    <div class="demo-item">
      <h3>基础用法</h3>
      <div class="mb-2">点击加载更多按钮获取更多数据</div>
      <div class="list-container">
        <div v-for="(item, index) in list" :key="index" class="list-item">
          {{ item.name }}
        </div>
      </div>
      <div class="load-more-container">
        <a-button 
          type="primary" 
          :loading="loading" 
          @click="onLoadMore"
          v-if="!noMore"
        >
          加载更多
        </a-button>
        <span v-else>没有更多数据了</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useLoadMore } from "@/hooks/useLoad";

// 模拟接口请求
const mockFetch = async (params: any) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const { page, size } = params;
      const total = 50;
      const data = Array.from({ length: size }, (_, index) => ({
        id: (page - 1) * size + index + 1,
        name: `列表项 ${(page - 1) * size + index + 1}`
      }));
      
      resolve({
        success: true,
        data,
        totalCount: total,
        totalPages: Math.ceil(total / size)
      });
    }, 500);
  });
};

const { list, loading, noMore, initLoad, onLoadMore } = useLoadMore(mockFetch);

onMounted(() => {
  initLoad();
});
</script>

<style scoped lang="less">
.demo-wrapper {
  .demo-item {
    margin-bottom: 24px;
    h3 {
      margin-bottom: 16px;
      margin-top: 0;
      font-weight: 500;
    }
  }
  .list-container {
    margin-bottom: 16px;
    .list-item {
      padding: 8px 16px;
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .load-more-container {
    text-align: center;
  }
}
</style>

滚动加载

请参考 懒加载选择器 实现

API

useLoadMore 参数

参数	说明	类型	默认值
ajaxFn	请求数据的函数	Function	-
extraOptions	额外配置项	Ref<OptionsType>	ref({ extraParams: {}, hasPagination: true })

extraOptions 配置项

参数	说明	类型	默认值
extraParams	额外的请求参数	Record<string, any>	{}
hasPagination	是否使用分页	boolean	true
pageKey	页码参数名	string	page
pageSizekey	每页条数参数名	string	size
transformAfterFetch	数据转换函数	(data: any) => any	-

返回值

参数	说明	类型
list	数据列表	Ref<any[]>
loading	加载状态	Ref<boolean>
noMore	是否还有更多数据	Ref<boolean>
initLoad	初始化加载函数	(resetPage?: boolean) => Promise<void>
onLoadMore	加载更多函数	() => Promise<void>

注意事项

1. 接口返回数据格式需要包含以下字段：

   {
     success: boolean;
     data: any[];
     totalCount?: number;
     totalPages?: number;
   }

2. 如果接口返回格式与默认格式不一致，可以通过 transformRequsRes 配置进行转换。

3. 初始化加载时，可以通过 initLoad(true) 来重置页码和数据列表。