# 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 即可