基于Vue2实现滚动过程中数据懒加载
<template>
<div style="height: 100px">
<div v-for="item in items" :key="" class="item">{{ item.text }}</div>
<div v-if="loading">Loading...</div>
</div>
</template>
<script>
import { throttle } from 'lodash'
export default {
data() {
return {
items: [], // 用于存放已加载的 item
loading: false, // 控制是否展示 loading
page: 1, // 当前页数
pageSize: 5, // 每页数量
threshold: 100, // 距离底部多少像素时触发加载
};
},
mounted() {
this.loadMore(); // 首次加载数据
window.addEventListener("scroll", throttle(this.handleScroll, 1000)); // 绑定滚动事件
},
methods: {
loadMore() {
this.loading = true; // 开启 loading 状态
// 模拟异步加载数据
setTimeout(() => {
for (let i = 0; i < this.pageSize; i++) {
this.items.push({
id: this.items.length + 1,
text: `Item ${this.items.length + 1}`,
});
}
this.loading = false; // 关闭 loading 状态
this.page++;
}, 1000);
},
handleScroll() {
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; // 获取当前滚动位置
const windowHeight = window.innerHeight; // 获取视口高度
const scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight; // 获取文档总高度
if (scrollHeight - (scrollTop + windowHeight) < this.threshold) {
// 判断是否已滚动到底部
this.loadMore(); // 触发加载更多
}
},
},
beforeDestroy() {
window.removeEventListener("scroll", throttle(this.handleScroll, 1000)); // 解绑滚动事件
},
};
</script>
<style lang="less" scoped>
.item {
height: 200px;
}
</style>