分页函数文档
This commit is contained in:
parent
03ba6f518f
commit
903bbc07f4
76
docs/winB_Pagination.md
Normal file
76
docs/winB_Pagination.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
## winB_Pagination 分页管理工厂函数说明
|
||||
|
||||
### 概述
|
||||
用于生成带 `winB_` 前缀的 Vue mixin,统一管理分页列表。支持两种模式:上拉加载更多(loadMore)与分页器(pager)。
|
||||
|
||||
### 期望接口返回结构
|
||||
- `code`: 业务码,应为 `200`
|
||||
- `rows`: 当前页数据数组
|
||||
- `total`: 数据总条数
|
||||
|
||||
### 选项(createPagination options)
|
||||
- **fetchData**: 必填,请求函数,入参为 `winB_QueryParams`
|
||||
- **defaultParams**: 初始查询参数(合并到 `winB_QueryParams`)
|
||||
- **mode**: `'loadMore' | 'pager'`,默认 `loadMore`
|
||||
- **pageSize**: 每页条数,默认 `10`
|
||||
- **autoLoad**: 组件创建时是否自动请求,默认 `true`
|
||||
|
||||
### 状态与计算属性
|
||||
- **核心状态**
|
||||
- `winB_List`: 数据列表
|
||||
- `winB_Loading`: 加载中标记
|
||||
- `winB_Error`: 错误对象
|
||||
- `winB_QueryParams`: `{ pageNum, pageSize, ...defaultParams }`
|
||||
- `winB_Pagination`: `{ total, currentPage, pageSize, totalPages, remainingItems }`
|
||||
- `winB_NoMore`: `loadMore` 模式下是否还有更多
|
||||
- **计算属性**
|
||||
- `winB_HasData`: 列表是否有数据
|
||||
- `winB_IsEmpty`: 非加载且列表为空
|
||||
- `winB_CanLoadMore`: 仅在 `loadMore` 模式、未到尽头且未加载时为 `true`
|
||||
|
||||
### 主要方法
|
||||
- **winB_GetList(reset = false)**: 拉取数据;`reset` 时清空并重置页码为 1,成功后更新列表与分页信息;在 `loadMore` 模式下计算 `winB_NoMore`。
|
||||
- **winB_Refresh()**: 重置并刷新(等价于 `winB_GetList(true)`)。
|
||||
- **winB_LoadMore()**: 上拉加载下一页(仅在 `winB_CanLoadMore` 时生效)。
|
||||
- **winB_GoToPage(page)**: 分页器模式跳页(校验范围与重复页)。
|
||||
- **winB_Reset()**: 重置所有分页相关状态与列表。
|
||||
- **winB_UpdateParams(newParams)**: 合并查询参数并重置页码为 1,然后重置与拉取。
|
||||
- **winB_FormatDate(dateString)**: 将日期格式化为 `YYYY.MM.DD`。
|
||||
|
||||
### 生命周期
|
||||
- **created**: 当 `autoLoad=true` 时自动调用 `winB_GetList()`。
|
||||
|
||||
### 使用示例
|
||||
```js
|
||||
// 导入
|
||||
import { createPagination } from "../../composables/winB_Pagination";
|
||||
|
||||
export default {
|
||||
mixins: [
|
||||
createPagination({
|
||||
fetchData: getProjectSchedule,
|
||||
mode: "loadMore", // 或 "pager"
|
||||
pageSize: 5,
|
||||
autoLoad: false, // 手动触发时设为 false
|
||||
}),
|
||||
],
|
||||
created() {
|
||||
// 条件就绪后触发首次加载
|
||||
this.winB_UpdateParams({ formedId: this.formedId });
|
||||
},
|
||||
onReachBottom() {
|
||||
this.winB_LoadMore();
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- 列表渲染 -->
|
||||
<view v-for="(item, index) in winB_List" :key="index">...</view>
|
||||
```
|
||||
|
||||
### 小提示
|
||||
- `fetchData` 应直接返回包含 `code/rows/total` 的对象。若接口结构不同,可在 `fetchData` 外层适配或在 `winB_GetList` 内做映射。
|
||||
- 切换筛选条件时使用 `winB_UpdateParams`,它会自动重置页码并刷新。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user