vue-seamless-scroll 写一个实现循环滚动从上到下

Vue Seamless Scroll是一个用于Vue.js的轻量级插件，它提供了一个无缝滚动的体验，适用于无限滚动列表或者分页场景。以下是使用这个插件实现循环滚动从上到底部的一个简单示例：

首先，你需要安装`vue-seamless-scroll`插件，可以使用npm或yarn：

npm install vue-seamless-scroll
# 或者
yarn add vue-seamless-scroll

然后，在Vue组件中引入并使用该插件：

<template>
  <div id="scroll-container">
    <ul v-seamless-scroll :data="items" :height="viewportHeight" @seamless-scroll-end="loadMoreData">
      <li v-for="(item, index) in displayedItems" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { seamlessScroll } from 'vue-seamless-scroll'

export default {
  name: 'SeamlessScrollDemo',
  data() {
    return {
      items: [], // 假设这是一个从服务器获取的数据数组
      viewportHeight: 300, // 视口高度
      displayedItems: [],
      moreDataLoading: false,
    }
  },
  mounted() {
    this.displayedItems = this.items.slice(0, this.viewportHeight);
    seamlessScroll.init(this.$refs.scrollContainer)
  },
  methods: {
    loadMoreData() {
      if (!this.moreDataLoading && this.items.length > this.displayedItems.length) {
        this.moreDataLoading = true;
        // 加载更多数据的函数，这里只是一个示例，实际应用中替换为网络请求
        setTimeout(() => {
          this.items.push(...new Array(5)); // 假设每次加载5条数据
          this.displayedItems = this.items.slice(0, this.viewportHeight);
          this.moreDataLoading = false;
        }, 1000); // 模拟异步加载时间
      }
    },
  },
}
</script>

在这个例子中，当用户滚动到视口底部时，`loadMoreData`方法会被触发，加载更多的数据并更新显示的列表。