表格和列表的无限滚动

最新推荐文章于 2025-07-04 15:00:24 发布

原创最新推荐文章于 2025-07-04 15:00:24 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

该文章介绍了如何在Vue应用中实现表格和列表的无限滚动加载效果。通过监听滚动事件和使用`v-infinite-scroll`指令，当用户接近底部时，动态加载新数据并更新页面。文章涉及到的数据管理包括当前页数、总页数、分页大小以及数据加载状态的维护。

一、表格的无限滚动

// 表格滚动加载
function tableScroll() {
	// 获取表格对象
	nextTick(() => {
		let dom = document.querySelector('.el-table__body-wrapper') as any;
		dom.addEventListener('scroll', () => {
			const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
			// 判断是否到底，可以加载下一页
			if (scrollDistance <= 1) {
				// 判断是否全部加载完成
				if (state.tableData.length >= state.total) {
					console.log('加载完了');
				} else {
					//当前页数小于总页数就请求
					state.currentPage++; //当前页数自增
					let a = state.listAllData.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize);
					state.tableData = [...state.tableData, ...a];
				}
			}
		});
	});
}
onMounted(() => {
	tableScroll();
});

二、列表的无限滚动

<div 
	v-infinite-scroll="load" 
	:infinite-scroll-disabled="disabled" 
	style="height: calc(100% - 10px);overflow: auto"
>
	<div v-for="item in tableData" :key="item.elementId">
		<div class="titleElement">
			<i class="el-icon-document"></i>
			{{ item.elementName }}
		</div>
	</div>
	<p v-if="dataLoading" style="text-align: center">加载中...</p>
	<p v-if="noMore" style="text-align: center">没有更多了~</p>
</div>

// 无限滚动
const noMore: Ref = computed(() => {
	return state.tableData.length >= state.total;
});
const disabled: Ref = computed(() => {
	return state.dataLoading || noMore.value;
});
function load() {
	state.dataLoading = true;
	setTimeout(() => {
		if (state.tableData.length < state.total) {
			state.currentPage++;
			let a = state.listAllData.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize);
			state.tableData = [...state.tableData, ...a];
			state.dataLoading = false;
		}
	}, 400);
}