<template>
<div class="infinite-scroll-container">
<div
class="message"
v-for="(message, index) in messages"
:key="index">
{{ message.text }}
</div>
<infinite-scroll
@loadMore="loadMoreMessages"
:distance="100"
:isLoading="isLoadingMore"
:hasMore="hasMoreMessages">
<div class="loader" v-if="isLoadingMore">Loading...</div>
</infinite-scroll>
</div>
</template>
<script>
import InfiniteScroll from 'vue-infinite-scroll';
export default {
components: {
InfiniteScroll
},
data() {
return {
messages: [],
isLoadingMore: false,
hasMoreMessages: true,
nextPage: 1
};
},
methods: {
loadMoreMessages() {
if (!this.hasMoreMessages || this.isLoadingMore) return;
this.isLoadingMore = true;
// 模拟从API获取数据
setTimeout(() => {
const moreMessages = [
// ...获取到的新消息
];
this.messages = [...this.messages, ...moreMessages];
this.isLoadingMore = false;
// 模拟检查是否还有更多消息
if (moreMessages.length === 0) {
this.hasMoreMessages = false;
}
}, 1000);
}
}
};
</script>
<style scoped>
.infinite-scroll-container {
height: 300px;
overflow-y: scroll;
}
.message {
/* 样式 */
}
.loader {
/* 样式 */
}
</style>这个例子中，我们创建了一个简单的聊天界面，其中包含了无限滚动的消息列表。InfiniteScroll 组件在用户滚动到列表底部时触发 loadMore 事件，从而加载更多消息。这个例子演示了如何使用 vue-infinite-scroll 包来实现无限滚动的功能。