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