vue实现下拉分页思想
Vue 实现下拉分页的核心思想
监听滚动事件
通过监听滚动事件判断是否到达页面底部，触发加载更多数据。使用 window.addEventListener('scroll', ...) 或结合 @scroll 指令监听容器滚动。
计算滚动位置
比较滚动容器的 scrollTop、clientHeight 和 scrollHeight。当 scrollTop + clientHeight >= scrollHeight - threshold（阈值）时，触发分页加载。
handleScroll() {
const scrollPosition = this.$refs.scrollContainer.scrollTop;
const containerHeight = this.$refs.scrollContainer.clientHeight;
const contentHeight = this.$refs.scrollContainer.scrollHeight;
if (scrollPosition + containerHeight >= contentHeight - 50) {
this.loadMore();
}
}分页数据加载
调用 API 获取下一页数据，合并到现有列表。需避免重复请求和空数据导致的无限触发。
async loadMore() {
if (this.isLoading || !this.hasNextPage) return;
this.isLoading = true;
const res = await fetchData(this.currentPage + 1);
this.list = [...this.list, ...res.data];
this.currentPage++;
this.isLoading = false;
}优化性能
使用防抖（debounce）减少滚动事件触发频率，避免频繁计算。可通过 Lodash 或自定义实现。
import { debounce } from 'lodash';
mounted() {
this.handleScroll = debounce(this.handleScroll, 200);
}无限滚动组件
可封装为可复用的指令或组件，例如 v-infinite-scroll，通过参数配置阈值、加载方法等。
<template>
<div v-infinite-scroll="loadMore" :infinite-scroll-disabled="isLoading">
<!-- 列表内容 -->
</div>
</template>注意事项
- 确保父容器有明确的高度和
overflow-y: auto样式。 - 移动端需考虑 touch 事件的兼容性。
- 分页结束后隐藏加载提示或禁用监听。
