加载更多项目不显示(Vue JS)

methods: {
loadMore() {
// 假设 fetchData 是获取数据的异步函数
fetchData().then(newItems => {
this.items = [...this.items, ...newItems]; // 合并新旧数据
});
}
}

mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
// 检查是否滚动到底部，并调用 loadMore 方法
if (/* 判断条件 */) {
this.loadMore();
}
}
}

data() {
return {
loading: false,
};
},
methods: {
loadMore() {
if (this.loading) return; // 如果正在加载，则直接返回
this.loading = true;
fetchData().then(newItems => {
this.items = [...this.items, ...newItems];
this.loading = false;
});
}
}

<template>
<div>
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
<div v-if="loading">加载中...</div>
</div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
setup() {
const items = ref([]);
const loading = ref(false);

const loadMore = async () => {
if (loading.value) return;
loading.value = true;
const newItems = await fetchData(); // 假设 fetchData 是获取数据的异步函数
items.value = [...items.value, ...newItems];
loading.value = false;
};

const handleScroll = () => {
if (/* 判断条件 */) {
loadMore();
}
};

onMounted(() => {
window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
window.removeEventListener('scroll', handleScroll);
});

return { items, loading, loadMore };
},
};
</script>