vue非插件实现列表无限循环滚动

在 Vue 中实现无限循环滚动列表，可以考虑使用两个相同的列表，一个列表用于渲染当前可见区域的数据，另一个列表用于渲染边界处的数据。当滚动到边界处时，将边界列表的数据复制到另一个列表中，实现无限循环滚动的效果。

下面是一个简单的实现示例：

<template>
  <div class="list-container" ref="listContainer">
    <div class="list" ref="list">
      <div v-for="(item, index) in visibleData" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="list-clone" ref="listClone">
      <div v-for="(item, index) in cloneData" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ["item1", "item2", "item3", "item4", "item5"],
      visibleData: [],
      cloneData: []
    };
  },
  mounted() {
    // 初始化列表
    this.updateList();
    // 监听滚动事件
    this.$refs.listContainer.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听器
    this.$refs.listContainer.removeEventListener(
      "scroll",
      this.handleScroll
    );
  },
  methods: {
    // 更新列表数据
    updateList() {
      const { data } = this;
      const visibleData = data.slice();
      const cloneData = data.slice(0, 2);
      this.visibleData = visibleData;
      this.cloneData = cloneData;
    },
    // 处理滚动事件
    handleScroll() {
      const { scrollTop, scrollHeight, clientHeight } = this.$refs.listContainer;
      // 判断是否到达边界
      if (scrollTop === 0) {
        // 滚动到顶部，将边界数据插入到列表底部
        this.visibleData = this.cloneData.concat(this.data);
        this.$refs.list.scrollTop = this.$refs.list.scrollHeight / 3;
      } else if (scrollTop + clientHeight === scrollHeight) {
        // 滚动到底部，将边界数据插入到列表顶部
        this.visibleData = this.data.concat(this.cloneData);
        this.$refs.list.scrollTop = this.$refs.list.scrollHeight / 3;
      }
    }
  }
};
</script>

这个示例中，我们使用了两个 `div` 元素，一个用于渲染当前可见区域的数据，另一个用于渲染边界处的数据。在 `mounted` 钩子函数中，我们初始化了列表数据，并添加了滚动事件的监听器。在 `beforeDestroy` 钩子函数中，我们移除了滚动事件的监听器。

`updateList` 方法用于更新列表数据，将数据分为可见区域数据和边界数据，并将它们分别渲染到两个 `div` 元素中。

`handleScroll` 方法用于处理滚动事件。当滚动到顶部时，我们将边界数据插入到列表底部，并将滚动位置设置为列表高度的三分之一；当滚动到底部时，我们将边界数据插入到列表顶部，并将滚动位置设置为列表高度的三分之一。

这样，就可以实现一个简单的无限循环滚动列表了。