使用Vue 3的Composition API 写一个底部加载更多

的组件，你能给我示例代码吗？

当然可以，以下是示例代码：

<template>
<div>
<div v-for="item in list" :key="item.id">{{ item.title }}</div>
<div v-if="loading">Loading......</div>
<button v-if="!loading && hasMore" @click="loadMore">Load More</button>
<div v-if="!hasMore">No More Data</div>
</div>
</template>

<script>
import { reactive, ref, watchEffect } from 'vue';

export default {
setup() {
// 数据列表
const list = reactive([]);
// 是否正在加载中
const loading = ref(false);
// 是否还有更多数据
const hasMore = ref(true);
// 加载更多函数
const loadMore = async () => {
// 正在加载中
loading.value = true;
// 模拟请求数据
const res = await fetch('http://example.com/api/list?page=1');
const data = await res.json();
// 是否还有更多数据
hasMore.value = data.hasMore;
// 添加数据
list.push(...data.list);
// 加载完成
loading.value = false;
};
// 初次加载数据
loadMore();
// 监听列表变化
watchEffect(() => {
console.log(list);
});
return {
list,
loading,
hasMore,
loadMore,
};
},
};
</script>