无限滚动组件

组件名称

CInfiniteScroll - 用于实现下拉刷新和上拉加载更多功能的滚动容器组件

组件说明

该组件实现了移动端常见的下拉刷新和上拉加载更多功能，支持自动加载第一页和手动触发加载，适用于列表展示场景。

使用方法

<CInfiniteScroll
  :autoInit="true"
  :onLoadMore="handleLoadMore"
>
  <!-- 内容插槽 -->
  <view v-for="(item, index) in list" :key="index">
    {{ item.name }}
  </view>
</CInfiniteScroll>

// 数据加载方法
handleLoadMore({ current, next, success, fail }) {
  // 请求后端数据
  $fetch.getList({ page: next }).then(res => {
    // 加载成功
    success({
      pageTotal: res.pageTotal, // 总页数
    });
  }).catch(() => {
    // 加载失败
    fail();
  });
}

属性说明

| onLoadMore | Function | - | 发起加载页面数据的回调函数 |

方法说明

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

回调参数说明

onLoadMore 回调函数参数：

使用示例

<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. 加载状态会自动管理，包括"加载中"和"没有更多了"等提示