vue实现滚动翻页
vue实现滚动翻页的方法
监听滚动事件
在Vue组件中，通过@scroll或window.addEventListener监听滚动事件，判断是否滚动到底部。使用clientHeight、scrollTop和scrollHeight计算滚动位置。
methods: {
handleScroll() {
const scrollPosition = window.innerHeight + window.scrollY;
const pageHeight = document.documentElement.scrollHeight;
if (scrollPosition >= pageHeight - 100) {
this.loadMore();
}
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
}加载更多数据
当滚动到底部时，触发数据加载方法。通常需要配合分页参数（如page和pageSize）从后端API获取数据。
data() {
return {
page: 1,
pageSize: 10,
list: [],
isLoading: false,
hasMore: true
};
},
methods: {
async loadMore() {
if (this.isLoading || !this.hasMore) return;
this.isLoading = true;
try {
const res = await fetchData(this.page, this.pageSize);
this.list = [...this.list, ...res.data];
this.hasMore = res.hasMore;
this.page++;
} finally {
this.isLoading = false;
}
}
}使用第三方库
可以使用vue-infinite-scroll等库简化实现。安装后直接在元素上添加指令即可。
import infiniteScroll from 'vue-infinite-scroll';
Vue.use(infiniteScroll);
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="isLoading">
<!-- 列表内容 -->
</div>优化性能 为避免频繁触发滚动事件，使用防抖（debounce）或节流（throttle）技术控制触发频率。
import { debounce } from 'lodash';
methods: {
handleScroll: debounce(function() {
// 滚动逻辑
}, 200)
}注意事项
- 确保在组件销毁时移除事件监听，避免内存泄漏。
- 处理加载状态和没有更多数据的情况，提升用户体验。
- 移动端可能需要额外处理触摸事件和滚动行为。
