usePagination

usePagination 是基于 useRequest 实现的分页请求 hook ，可以自动化管理分页信息，并且支持useRequest的全部功能。

注意

service 返回数据必须符合 PaginationResponse 分页规范（字段名称必须有:list、total）。若服务数据格式不兼容，开发者需要封装格式转换函数，或在响应拦截器中强制规范数据格式。

vue

<script setup lang="ts">
  import { usePagination } from 'norm-axios'

  const { list, data, page, pageSize } = usePagination(getList)
</script>

基础用法

注意

当 pageWatch 与 watchSource 同时设置为 true 后， page 或者 pageSize变化的时候会调用两遍服务，这个问题可以设置 pageWatch 或者 watchSource来解决

追加模式是指在请求数据时，自动将新请求的数据追加到已有列表中，例如第一次请求返回 [1, 2, 3]，第二次返回 [4, 5, 6] ，最终列表将合并为 [1, 2, 3, 4, 5, 6]。该功能常用于「加载更多」场景。

通过设置 addedMode: true 来开启该功能。

usePagination 还支持滚动到底部自动加载数据的功能，避免了手动点击加载更多的麻烦。

通过设置 target 属性为父级容器，在容器滚动到底部时，分页自动+1,然后加载数据。

避免重复触发，请求期间不会触发滚动到底部的事件。

属性	类型	默认值	描述
initialPage	`number`	`1`	初始页码
initialPageSize	`number`	`10`	初始每页数据条数
target	`MaybeRef<HTMLElement> \| ShallowRef<HTMLElement \| null>`	`-`	父级容器，如果存在，则在滚动到底部时，分页自动`+1`,然后加载数据。避免重复触发，请求期间不会触发滚动到底部的事件。
addedMode	`boolean`	`false`	追加模式启用后会自动将新请求的数据追加到已有列表中，例如第一次请求返回 `[1, 2, 3]`，第二次返回 `[4, 5, 6]`，最终列表将合并为 `[1, 2, 3, 4, 5, 6]`。该功能常用于「加载更多」场景。
pageWatch	`boolean`	`true`	当 `page` 变化的时候自动调用服务
resetPageWhenPageSizeChange	`boolean`	`true`	当 `pageSize` 变化的时候重置 `page`到`1`