vue3下拉组件滚动加载

在Vue 3中，实现下拉组件滚动加载通常会利用`v-for`指令结合`:key`属性以及自定义事件或者响应式计算属性来监控滚动位置。下面是一个简单的示例：

<template>
  <div ref="container">
    <ul v-for="(item, index) in displayedItems" :key="index">
      <li>{{ item }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 数据源
      pageSize: 10, // 每次加载项数
      currentPage: 0,
      isLoading: false, // 加载状态标志
      lastItemRenderedIndex: 0, // 最后渲染的元素索引
    };
  },
  computed: {
    displayedItems() {
      let start = this.currentPage * this.pageSize;
      return this.items.slice(start, start + this.pageSize);
    }
  },
  methods: {
    loadMore() {
      if (!this.isLoading && this.lastItemRenderedIndex < this.items.length - 1) {
        this.isLoading = true; // 设置加载状态
        // 模拟异步数据请求
        setTimeout(() => {
          this.items.push(...new Array(this.pageSize)); // 添加新数据
          this.lastItemRenderedIndex += this.pageSize;
          this.isLoading = false; // 完成加载后设置为false
        }, 1500); // 模拟延迟加载时间
      }
    },
    watch: {
      $refs.container({高度}, {oldHeight}) {
        if (height > oldHeight) { // 当容器高度增加时，可能是滚动到了底部
          this.loadMore();
        }
      }
    }
  }
};
</script>

在这个例子中，当用户滚动到底部时，`watch`中的回调会被触发，然后`loadMore`方法会被调用，从服务器加载更多的数据并更新`items`数组。注意这只是一个基本示例，实际项目中可能需要处理网络错误、分页、懒加载等细节。