###
Vue2 中
实现 `
div` 元素垂直
滚动触底分页
加载
#### 方法概述
为了
实现在
Vue2 项目中的 `
div` 元素内进行垂直
滚动并检测到
触底时触发分页
加载的功能，可以采用监听
滚动事件的方式，并结合节流技术来优化性能。具体来说，在每次
滚动发生时计算当前可视区域的高度以及整个容器的内容高度，以此判断是否接近底部[^1]。
#### 关键逻辑说明
当用户的
滚动操作使得视窗内的可见部分接近或达到设定阈值（通常是距离最下方一定像素范围内）时，则认为已经到达了“
触底”，此时应发起请求获取新一批的
数据项用于追加显示[^3]。
#### 示例代码
实现
下面是一个完整的例子展示了如何利用 JavaScript 和
Vue 来完成这一功能：
```html
<template>
<
div ref="scrollContainer" class="scroll-container">
<!-- 列表内容 -->
<ul v-if="items.length > 0">
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<!--
加载指示符 -->
<p v-show="loading">正在
加载...</p>
<!-- 结束提示 -->
<p v-if="noMoreData && !loading">没有
更多数据</p>
</
div>
</template>
<script>
export default {
data() {
return {
page: 1,
pageSize: 10,
totalItems: [], // 所有项目的集合
items: [],
loading: false,
noMoreData: false,
throttleTimeoutId: null,
};
},
mounted() {
this.fetchData();
window.addEventListener('resize', this.handleScroll);
const container = this.$refs.scrollContainer;
if (container) {
container.addEventListener('scroll', this.throttledHandleScroll);
}
},
beforeDestroy() {
window.removeEventListener('resize', this.handleScroll);
const container = this.$refs.scrollContainer;
if (container) {
container.removeEventListener('scroll', this.throttledHandleScroll);
}
},
methods: {
fetchData(callback) {
// 模拟异步请求接口
setTimeout(() => {
let newItems = Array.from({ length: this.pageSize }, (_, i) =>
`${this.page * this.pageSize + i}`
);
this.totalItems.push(...newItems);
callback?.();
this.items = [...this.totalItems];
this.loading = false;
if (this.totalItems.length >= TOTAL_ITEMS_COUNT) { // 定义全局变量TOTAL_ITEMS_COUNT表示总条目数
this.noMoreData = true;
} else {
this.page++;
}
}, 500); // 模拟网络延迟时间
},
handleScroll(event) {
clearTimeout(this.throttleTimeoutId);
this.throttleTimeoutId = setTimeout(() => {
this.checkIfNearBottom();
}, 200); // 设置节流间隔时间为200ms
},
throttledHandleScroll(event) {
this.handleScroll(event);
},
checkIfNearBottom() {
const container = this.$refs.scrollContainer;
if (!container || this.loading || this.noMoreData) return;
const scrollTop = container.scrollTop;
const clientHeight = container.clientHeight;
const scrollHeight = container.scrollHeight;
if ((scrollTop + clientHeight) >= (scrollHeight - 1)) {
this.loadMore();
}
},
loadMore() {
if (!this.loading && !this.noMoreData) {
this.loading = true;
this.fetchData(); // 获取下一页的
数据
}
}
}
};
</script>
<style scoped>
/* 添加样式使 .scroll-container 可以
滚动 */
.scroll-container {
height: 400px; /* 设定固定高度以便于测试 */
overflow-y: auto;
}
</style>
```
此段代码
实现了在一个具有特定类名 `.scroll-container` 的 `
div` 内部执行基于
滚动位置的懒
加载机制。每当用户向下
滚动至接近该容器底部时就会自动调用 `loadMore()` 函数去抓取额外的信息片段直至全部
加载完毕为止[^2]。
本文介绍了如何在Vue中实现一个简单的div滚动到底部自动加载更多数据的效果。通过监听div的scroll事件，判断是否达到底部，然后更新页数并调用后台接口获取新数据。关键CSS样式为设置高度和overflow属性。
扫一扫
1533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
