vue3下拉框滚动到底部再次加载数据

在Vue3中，实现下拉框（通常是一个虚拟滚动列表，比如`<el-select>`或自定义的`<select>`组件）滚动到底部自动加载更多数据，可以结合`v-for`、`v-if`以及`@scroll`事件。下面是一种常见的实现方式：

首先，在模板中设置滚动监听器，并遍历展示数据：

<template>
  <div ref="listContainer">
    <ul v-for="(item, index) in displayedItems" :key="index">
      <!-- 每一项渲染 -->
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const dataList = ref([]); // 假设这是从API获取的数据源
const listContainerRef = ref(null);
let isLoading = ref(false); // 是否正在加载更多数据

onMounted(() => {
  loadInitialData();
})

function loadInitialData() {
  isLoading.value = true;
  fetchDataFromAPI().then((response) => {
    dataList.value = [...dataList.value, ...response.data];
    isLoading.value = false; // 数据加载完成
  });
}

function fetchDataFromAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: /* 新的数据项 */ });
    }, 2000); // 模拟异步请求延迟
  });
}

watch(() => listContainerRef.value.scrollTop, async (scrollTop) => {
  if (!isLoading.value && scrollTop >= listContainerRef.value.scrollHeight - listContainerRef.value.clientHeight) {
    // 当滚动到底部时触发加载更多
    await loadMoreData();
  }
});

async function loadMoreData() {
  isLoading.value = true;
  const newData = await fetchDataFromAPI(); // 实际请求更多数据
  dataList.value.push(...newData.data);
  isLoading.value = false;
}
</script>

在这个例子中，当用户滚动到列表底部时，`loadMoreData`函数会被调用，它会模拟一个异步操作来获取更多的数据并更新`dataList`。同时，我们通过`ref`包装了实际的DOM元素，以便于监听滚动事件。