vue使用el-scrollbar的end-reached实现页面数据懒加载无限滚动

方法一：使用 end-reached事件

el-scrollbar的end-reached是基于2.10.0版本实现的。如果element UI版本过低，一定要先升级版本。

• el-scrollbar包裹的就是我们当前要滚动的区域。使用其end-reached事件，就可以确定滚动到了页面底部。那么触发end-reached事件时，就是我们要加载新数据的时机。
• 在实现功能之前要先进行引入。这里一定要引入，这个引入可以让新数据加载后，滚动条还定位在原来的位置。

import type { ScrollbarDirection } from 'element-plus'

<el-scrollbar
	:min-height="scrollHeight"		
	@end-reached="loadMore"
>
    // ……你自己的代码


</el-scrollbar>

• 当滚动到最底部时，触发定义的loadMore方法。这里请求数据的接口名称是我随便写的。换成自己的请求方法即可。

const loadMore = (direction: ScrollbarDirection) => {
	if (direction === 'bottom') {
		// 请求接口获取新的数据
        getDataList()
	}
};

• 这时已经完成了滚动条滚动到最底部时，加载新数据的功能。接下来要完成数据的拼接，并且可以持续滚动。
• 假定getList是请求接口获取的数据，监听这个变量，如果有变化时，说明请求到了新的数据。那么进行拼接即可。
• 拼接后的数据partListData，就是最终要循环展示的数据。

const partListData = ref([]);
watch(getList, () => {
	nextTick(() => {
		partListData.value = [...partListData.value, ...getList.value];
	});
});

如果你请求来的数据，返回了共有多少条数据的字段。那么可以在监听getList时，判断partListData的 length-1 是否和条数字段相同。如果相同时，提示用户没有最新数据了。

 方法二：使用scroll事件

end-reached如果不能兼容当前设备，那么可以使用scroll事件来做到同样的操作。

• 首先要给el-scrollbar添加ref和scroll事件。

<el-scrollbar
	:min-height="scrollHeight"		
	@scroll="handleScroll"
	ref="myScrollbar"
>
    // ……你自己的代码


</el-scrollbar>

• 我这里将scroll事件，设置的是距离底部100px时触发加载新数据。
• scrollHeight是元素内容总高度。
• handleScroll方法接收的参数scrollTop是滚动条距离顶部的距离。
• clientHeight是元素内部高度。
• scrollHeight = handleScroll +  clientHeight

const myScrollbar = ref(null);
const handleScroll = ({ scrollTop }) => {
	const wrap = myScrollbar.value?.wrapRef;
	if (wrap) {
		const scrollHeight = wrap.scrollHeight;
		const clientHeight = wrap.clientHeight;
		const distanceToBottom = Number(scrollHeight) - scrollTop - Number(clientHeight);
		if (distanceToBottom <= 100 ) {
			console.log('距离底部100px以内，加载新数据');
		}
	}
};

注意自己得到的数据是String还是Number。避免直接计算导致的拼串。