| | |
|---|
| | | # 无限滚动组件 |
|---|
| | | # CInfiniteScroll 无限滚动组件 |
|---|
| | | |
|---|
| | | ## 组件名称 |
|---|
| | | ## 功能说明 |
|---|
| | | |
|---|
| | | `CInfiniteScroll` - 用于实现下拉刷新和上拉加载更多功能的滚动容器组件 |
|---|
| | | 该组件实现了移动端常见的下拉刷新和上拉加载更多功能，支持自动加载第一页和手动触发加载，适用于列表展示场景。内置了加载状态、空数据状态和加载完成状态的显示，使用简单便捷。 |
|---|
| | | |
|---|
| | | ## 组件说明 |
|---|
| | | |
|---|
| | | 该组件实现了移动端常见的下拉刷新和上拉加载更多功能，支持自动加载第一页和手动触发加载，适用于列表展示场景。 |
|---|
| | | |
|---|
| | | ## 使用方法 |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <CInfiniteScroll |
|---|
| | | :autoInit="true" |
|---|
| | | :onLoadMore="handleLoadMore" |
|---|
| | | > |
|---|
| | | <!-- 内容插槽 --> |
|---|
| | | <view v-for="(item, index) in list" :key="index"> |
|---|
| | | {{ item.name }} |
|---|
| | | </view> |
|---|
| | | </CInfiniteScroll> |
|---|
| | | ``` |
|---|
| | | ## 引用方式 |
|---|
| | | |
|---|
| | | ```js |
|---|
| | | // 数据加载方法 |
|---|
| | | handleLoadMore({ current, next, success, fail }) { |
|---|
| | | // 请求后端数据 |
|---|
| | | $fetch.getList({ page: next }).then(res => { |
|---|
| | | // 加载成功 |
|---|
| | | success({ |
|---|
| | | pageTotal: res.pageTotal, // 总页数 |
|---|
| | | }); |
|---|
| | | }).catch(() => { |
|---|
| | | // 加载失败 |
|---|
| | | fail(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | import { CInfiniteScroll } from '@components/plugins/infiniteScroll'; |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## 属性说明 |
|---|
| | | ## 组件参数 |
|---|
| | | |
|---|
| | | | 属性名 | 类型 | 默认值 | 说明 | |
|---|
| | | | ---------- | -------- | ------ | -------------------------------- | |
|---|
| | | | autoInit | Boolean | false | 是否自动初始化（自动加载第一页） | |
|---|
| | | | onLoadMore | Function | - | 发起加载页面数据的回调函数 | |
|---|
| | | - `autoInit` (Boolean，默认值：false)：是否自动初始化（自动加载第一页） |
|---|
| | | - `onLoadMore` (Function，必填)：发起加载页面数据的回调函数 |
|---|
| | | - `current` (Number)：当前页页码 |
|---|
| | | - `next` (Number)：需要加载的页面页码 |
|---|
| | | - `success` (Function)：当加载成功后调用 |
|---|
| | | - 参数：`{ pageTotal: Number }` 总页数 |
|---|
| | | - `fail` (Function)：加载失败后调用 |
|---|
| | | |
|---|
| | | ## 方法说明 |
|---|
| | | ## 实例方法 |
|---|
| | | |
|---|
| | | | 方法名 | 参数 | 说明 | |
|---|
| | | | ----------- | --------- | ------------------------------------------- | |
|---|
| | | | $initScroll | - | 初始化加载第一页数据 | |
|---|
| | | | $refresh | autoStart | 重置并刷新数据，参数为 'off' 时不会自动加载 | |
|---|
| | | |
|---|
| | | ## 回调参数说明 |
|---|
| | | |
|---|
| | | `onLoadMore` 回调函数参数： |
|---|
| | | |
|---|
| | | | 参数名 | 类型 | 说明 | |
|---|
| | | | ------- | -------- | ---------------------------------------------- | |
|---|
| | | | current | Number | 当前页页码 | |
|---|
| | | | next | Number | 需要加载的页面页码 | |
|---|
| | | | success | Function | 当加载成功后调用，参数 `{ pageTotal: 总页数 }` | |
|---|
| | | | fail | Function | 加载失败后调用 | |
|---|
| | | - `$initScroll`：初始化加载第一页数据 |
|---|
| | | - `$refresh`：重置并刷新数据 |
|---|
| | | - `autoStart` (String，可选)：当值为 'off' 时不会自动加载，其他值或不传时会立即加载 |
|---|
| | | |
|---|
| | | ## 使用示例 |
|---|
| | | |
|---|
| | | ### 基础用法 |
|---|
| | | |
|---|
| | | ```html |
|---|
| | | <template> |
|---|
| | |
|---|
| | | |
|---|
| | | ## 注意事项 |
|---|
| | | |
|---|
| | | 1. 组件通过检测滚动位置自动触发加载更多功能 |
|---|
| | | 2. 下拉刷新功能仅在滚动到顶部时可用 |
|---|
| | | 3. 加载状态会自动管理，包括"加载中"和"没有更多了"等提示 |
|---|
| | | - 组件通过检测滚动位置自动触发加载更多功能 |
|---|
| | | - 下拉刷新功能仅在滚动到顶部时可用 |
|---|
| | | - 加载状态会自动管理，包括"加载中"、"没有更多了"和"暂无数据"等提示 |
|---|
| | | - 组件内部对 H5 和小程序环境做了适配，在不同平台上使用相同的 API 即可 |
|---|
