Element｜InfiniteScroll 无限滚动组件的具体使用方法

<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 包来实现无限滚动的功能。