vue3 滚动触底事件

### Vue3 实现滚动触底事件 以下是基于 Vue3 的实现方法，提供了完整的代码示例以及详细的解释。 #### HTML 结构 在模板部分定义了一个 `div` 容器，并绑定 `@scroll` 事件以监听滚动行为。此容器作为主要的内容区域，在用户滚动至底部时触发特定逻辑[^1]。 ```html <template> <div class="container" ref="content" @scroll="handleScroll"> <!-- 动态加载的内容 --> <p v-for="(item, index) in items" :key="index">{{ item }}</p> <!-- 加载提示符 --> <div v-if="loading" class="loading">Loading...</div> </div> </template> ``` --- #### CSS 样式 为了确保滚动条正常工作并显示内容，需设置固定高度和溢出属性。 ```css <style scoped> .container { height: 400px; overflow-y: auto; border: 1px solid #ccc; } .loading { text-align: center; color: gray; } </style> ``` --- #### JavaScript 部分 在脚本中实现了核心逻辑，包括初始化数据、滚动事件处理器以及模拟加载更多数据的功能。 ```javascript <script> import { ref } from 'vue'; export default { setup() { const content = ref(null); // 绑定 DOM 节点 const items = ref([]); // 存储动态加载的数据 const loading = ref(false); // 控制加载状态 let page = 1; // 当前页数 // 模拟接口请求 const fetchData = () => { return new Promise((resolve) => { setTimeout(() => { resolve(Array.from({ length: 10 }, (_, i) => `${page} - Item ${i}`)); }, 1000); }); }; // 处理滚动事件 const handleScroll = () => { if (!content.value || loading.value) return; const container = content.value; if ( container.clientHeight + container.scrollTop >= container.scrollHeight - 5 ) { loadMore(); } }; // 加载更多数据 const loadMore = async () => { try { loading.value = true; const newData = await fetchData(); // 请求新数据 items.value.push(...newData); // 更新列表 page += 1; // 增加页码 } catch (error) { console.error('Failed to fetch data:', error); } finally { loading.value = false; } }; return { content, items, loading, handleScroll, }; }, }; </script> ``` --- #### 关键点解析 1. **滚动事件监听** 在 `handleScroll` 方法中，通过比较 `scrollTop`, `clientHeight` 和 `scrollHeight` 来判断是否到达底部[^2]。 2. **防抖机制** 如果频繁触发滚动事件可能导致性能问题，因此可以通过条件限制或引入防抖函数优化体验。 3. **IntersectionObserver 替代方案** 对于更复杂的场景，推荐使用 IntersectionObserver API 监听某个占位节点的可见性变化，从而替代传统的滚动计算方式[^3]。 --- ###