该组件实现了移动端常见的下拉刷新和上拉加载更多功能，支持自动加载第一页和手动触发加载，适用于列表展示场景。内置了加载状态、空数据状态和加载完成状态的显示，使用简单便捷。
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' 时不会自动加载，其他值或不传时会立即加载<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>