# 无限滚动组件

## 组件名称

`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();
  });
}
```

## 属性说明

| 属性名     | 类型     | 默认值 | 说明                             |
| ---------- | -------- | ------ | -------------------------------- |
| autoInit   | Boolean  | false  | 是否自动初始化（自动加载第一页） |
| onLoadMore | Function | -      | 发起加载页面数据的回调函数       |

## 方法说明

| 方法名      | 参数      | 说明                                        |
| ----------- | --------- | ------------------------------------------- |
| $initScroll | -         | 初始化加载第一页数据                        |
| $refresh    | autoStart | 重置并刷新数据，参数为 'off' 时不会自动加载 |

## 回调参数说明

`onLoadMore` 回调函数参数：

| 参数名  | 类型     | 说明                                           |
| ------- | -------- | ---------------------------------------------- |
| current | Number   | 当前页页码                                     |
| next    | Number   | 需要加载的页面页码                             |
| success | Function | 当加载成功后调用，参数 `{ pageTotal: 总页数 }` |
| fail    | Function | 加载失败后调用                                 |

## 使用示例

```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>
```

## 注意事项

1. 组件通过检测滚动位置自动触发加载更多功能
2. 下拉刷新功能仅在滚动到顶部时可用
3. 加载状态会自动管理，包括"加载中"和"没有更多了"等提示