Vue 3如何实现微信聊天记录向上滚动加载？

Vue 3实现微信式聊天记录向上滚动加载：保持滚动位置

开发类似微信聊天记录的应用时，需要在用户向上滚动到顶部时加载更多历史消息，同时保持滚动条位置不变。本文演示如何使用Vue 3实现此功能。

原始代码结构及问题:

以下代码展示了基本的向上滚动加载，但加载新消息后，滚动条会回到顶部：

改进后的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;
    });
  }
};

关键在于：

1. 在添加新数据前记录scrollHeight。
2. 使用nextTick确保DOM更新后，再计算滚动条需要移动的距离(scrollHeightAfter - scrollHeightBefore)。
3. 将scrollTop设置为计算出的距离，保持滚动条在加载新数据后的相对位置。

通过这个改进，Vue 3应用就能实现类似微信聊天记录的向上滚动加载功能，并在加载更多消息后保持滚动条在相同相对位置，提供更流畅的用户体验。 记住在你的CSS中添加必要的样式来确保容器有垂直滚动条 (overflow-y: auto;)。