Electron-Vite + Vue 3 项目中实现流畅触底加载更多功能
作者：韶鹿先生
本文介绍在Electron-Vite+Vue3项目中实现触底加载的两种方式：原生滚动监听和vue-infinite-loading库,下面给大家分享详细实现步骤,感兴趣的朋友一起看看吧
在 Electron-Vite + Vue 3 项目中实现触底加载更多（无限滚动）功能，可以通过监听滚动事件或使用现成的库（如 vue-infinite-loading）来完成。以下是详细实现步骤：
方案一：原生滚动监听（推荐）
1. 模板部分
在需要触底加载的列表组件中，添加滚动监听：
<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([]); // 数据列表
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>3. 样式部分
<style scoped>
.scroll-container {
height: 80vh; /* 固定高度触发滚动 */
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>关键细节说明
- 触底条件计算
scrollHeight：内容总高度scrollTop：已滚动高度clientHeight：容器可视高度- 公式：
scrollHeight - (scrollTop + clientHeight) < threshold
- Electron 特殊处理
- 如果内容在
<webview>或<iframe>中，需在 主进程 中允许加载外部资源：
new BrowserWindow({
webPreferences: {
webSecurity: false // 允许跨域请求（开发环境）
}
});- 性能优化
- 使用 防抖（
lodash.debounce）避免频繁触发：
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
常见问题
- Q：滚动事件不触发？
A：确保容器有固定高度和overflow-y: auto。 - Q：数据重复加载？
A：检查loading和noMore的状态锁。 - Q：Electron 中跨域请求失败？
A：在主进程配置webSecurity: false（仅限开发环境）。
通过以上方法，可以轻松在 Electron-Vite + Vue 3 中实现流畅的触底加载效果！
到此这篇关于Electron-Vite + Vue 3 项目中实现触底加载更多的文章就介绍到这了,更多相关vue触底加载更多内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！