​Electron-Vite + Vue 3​ 项目中实现流畅触底加载更多功能

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="noMore" class="no-more">没有更多了</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const items = ref([]); // 数据列表
const page = ref(1);   // 当前页码
const loading = ref(false);
const noMore = ref(false);
// 模拟异步加载数据
const loadMore = async () => {
  if (loading.value || noMore.value) return;
  loading.value = true;
  try {
    // 替换为实际API请求
    const newItems = await fetchData(page.value);
    if (newItems.length === 0) {
      noMore.value = true;
    } else {
      items.value = [...items.value, ...newItems];
      page.value++;
    }
  } finally {
    loading.value = false;
  }
};
// 监听滚动事件
const handleScroll = (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.target;
  // 触底条件：距离底部 < 50px
  if (scrollHeight - (scrollTop + clientHeight) < 50) {
    loadMore();
  }
};
// 初始化加载
onMounted(() => {
  loadMore();
});
// 清理事件（如果绑定在window上）
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.scroll-container {
  height: 80vh; /* 固定高度触发滚动 */
  overflow-y: auto;
}
.loading, .no-more {
  text-align: center;
  padding: 10px;
}
</style>

npm install vue-infinite-loading@next

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <InfiniteLoading @infinite="loadMore" :distance="100">
      <template #spinner>加载中...</template>
      <template #no-more>没有更多了</template>
    </InfiniteLoading>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import InfiniteLoading from 'vue-infinite-loading';
const items = ref([]);
const page = ref(1);
const noMore = ref(false);
const loadMore = async ($state) => {
  try {
    const newItems = await fetchData(page.value);
    if (newItems.length === 0) {
      noMore.value = true;
      $state.complete();
    } else {
      items.value.push(...newItems);
      page.value++;
      $state.loaded();
    }
  } catch (err) {
    $state.error();
  }
};
</script>

new BrowserWindow({
  webPreferences: {
    webSecurity: false // 允许跨域请求（开发环境）
  }
});

import { debounce } from 'lodash-es';
const handleScroll = debounce((e) => { ... }, 200);

electron-vite-vue3-project/
├── src/
│   ├── main/           # Electron 主进程代码
│   ├── renderer/       # Vue 渲染进程代码
│   │   └── components/
│   │       └── InfiniteScroll.vue  # 触底加载组件
│   └── preload.js
└── vite.config.js