Vue 3实现微信式聊天记录向上滚动加载：保持滚动位置
开发类似微信聊天记录的应用时，需要在用户向上滚动到顶部时加载更多历史消息，同时保持滚动条位置不变。本文演示如何使用Vue 3实现此功能。
原始代码结构及问题:
以下代码展示了基本的向上滚动加载，但加载新消息后，滚动条会回到顶部：
- {{ item }}
改进后的handleScroll函数:
立即学习“前端免费学习笔记（深入）”；
为了解决滚动条回到顶部的问题，我们需要在加载新数据后，计算滚动条应该移动的距离，并将其设置回正确的位置。修改后的handleScroll函数如下：
const handleScroll = (ev) => {
const target = ev.target;
if (target.scrollTop === 0) {
const scrollHeightBefore = target.scrollHeight;
msgs.value.unshift(...generateNumbers(201, 400));
nextTick(() => {
const scrollHeightAfter = target.scrollHeight;
target.scrollTop = scrollHeightAfter - scrollHeightBefore;
});
}
};
关键在于：
- 在添加新数据前记录
scrollHeight。 - 使用
nextTick确保DOM更新后，再计算滚动条需要移动的距离(scrollHeightAfter - scrollHeightBefore)。 - 将
scrollTop设置为计算出的距离，保持滚动条在加载新数据后的相对位置。
通过这个改进，Vue 3应用就能实现类似微信聊天记录的向上滚动加载功能，并在加载更多消息后保持滚动条在相同相对位置，提供更流畅的用户体验。 记住在你的CSS中添加必要的样式来确保容器有垂直滚动条 (overflow-y: auto;)。
