?Electron-Vite?+?Vue?3??項目中實現(xiàn)流暢觸底加載更多功能

更新時間：2025年07月31日 11:38:05 作者：韶鹿先生

本文介紹在Electron-Vite+Vue3項目中實現(xiàn)觸底加載的兩種方式：原生滾動監(jiān)聽和vue-infinite-loading庫,下面給大家分享詳細實現(xiàn)步驟,感興趣的朋友一起看看吧

?方案一：原生滾動監(jiān)聽（推薦）??

?1. 模板部分?

在需要觸底加載的列表組件中，添加滾動監(jiān)聽：

<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>

?2. 腳本部分?

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const items = ref([]); // 數(shù)據(jù)列表
const page = ref(1);   // 當前頁碼
const loading = ref(false);
const noMore = ref(false);
// 模擬異步加載數(shù)據(jù)
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;
  }
};
// 監(jiān)聽滾動事件
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>

?3. 樣式部分?

<style scoped>
.scroll-container {
  height: 80vh; /* 固定高度觸發(fā)滾動 */
  overflow-y: auto;
}
.loading, .no-more {
  text-align: center;
  padding: 10px;
}
</style>

?方案二：使用vue-infinite-loading庫?

?1. 安裝依賴?

npm install vue-infinite-loading@next

?2. 在組件中使用?

<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>

?關鍵細節(jié)說明?

?觸底條件計算?
- scrollHeight：內(nèi)容總高度
- scrollTop：已滾動高度
- clientHeight：容器可視高度
- 公式：scrollHeight - (scrollTop + clientHeight) < threshold
?Electron 特殊處理?
如果內(nèi)容在 <webview> 或 <iframe> 中，需在 ?主進程? 中允許加載外部資源：

new BrowserWindow({
  webPreferences: {
    webSecurity: false // 允許跨域請求（開發(fā)環(huán)境）
  }
});

?性能優(yōu)化?
使用 ?防抖?（lodash.debounce）避免頻繁觸發(fā)：

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

?完整示例項目結(jié)構(gòu)?

electron-vite-vue3-project/
├── src/
│   ├── main/           # Electron 主進程代碼
│   ├── renderer/       # Vue 渲染進程代碼
│   │   └── components/
│   │       └── InfiniteScroll.vue  # 觸底加載組件
│   └── preload.js
└── vite.config.js