vue中list列表在滚动和窗口缩小自动加载数据

vue中list列表在滚动和窗口缩小自动加载数据

需求

一个list列表能够滚动加载数据，并且能在窗口缩小的时候也能自动加载更多数据；

框架

vue3+ts+ant

实现

滚动加载的时候只有滚动条的时候才有效果，但是窗口放小的时候没有滚动条了，因此开始上代码：

以下为布局

样式自己写吧，你的注定和我的不一样

		<div>
			<a-list
				ref="myList"
				class=“...”
				:data-source="datas"
				@scroll="handleScroll"
			>
				<template #renderItem="{ item }">
					<a-list-item
						class="..."
						@click="..."
					>
					</a-list-item>
				</template>
			<a-list>
		</div>

开始实现

handleScroll：是监听滚动的
myList：监听窗口大小的变量，也认为是ID、也可以认为是绑定的唯一数据，随便认为
定义变量：

const myList = ref(null);
const myDomHeight= ref(0);//变动中的高度，很重要
const myCurrent= ref(0);//当前请求的页码，很重要
const datas = ref([] as any);
const hasMore = ref(true);//控制是否再继续

//**请求列表数据的接口方法**
function getDatas() {
myCurrent.value++；
//当获取到全部数据时再不请求
hasMore.value = false;
//data获取到的数据，塞到全局绑定数据
datas.push（...data）
//判断是否继续去请求
useResizeContinue(myDomHeight.value);
}

//**列表滚动到最底自动加载**//
function handleScroll (event: Event) {
	const target = event.target as HTMLElement;
	if (target.scrollHeight - target.scrollTop <= target.clientHeight + 2) {//要加一点，不能太小了
		if (hasMore.value) {
			getData();
		}
	}
};
//**列表滚动到最底自动加载，使用@vueuse/core里面的监听控件的变化**//
useResizeObserver(myList, entries => {
	const entry = entries[0];
	const { width, height } = entry.contentRect;
	console.log(`${width}px`);
	myDomHeight.value = height;
	useResizeContinue(height);
});
//**封装了一个方法，全局用**//
function useResizeContinue(domHeight: number) {
//X代表你的item的高度*一次请求能占总的行数示例X=3，请看下面巨丑的图
	if ( X* myCurrent < domHeight) {
		getDatas();
	}
};

总结

根据useInfiniteScroll、useScroll其实是直接可以获取到对应的方法，只是我这项目不能升级到最新版本，自己写了这么一个，应该有 更好的方法，盼留言评论，一起学习！

我是小白，下次再扯