Vue3实现微信聊天记录向上滚动加载技巧

本文介绍如何使用Vue 3实现微信式聊天记录的向上滚动加载功能，解决加载更多消息后滚动条回到顶部的常见问题。文章分析了原始代码中存在的问题：在加载新数据后，滚动条会重置到顶部，影响用户体验。随后，文章给出了改进方案，通过在加载新数据前记录滚动高度，并在DOM更新后计算滚动条应移动的距离，最终实现加载新消息的同时保持滚动条在相同相对位置，提升用户体验。 关键词：Vue 3，微信聊天，滚动加载，保持滚动位置，向上滚动。

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

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

原始代码结构及问题:

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

<template><div id="app">
    <div class="container" ref="chatlistref">
      <ul><li v-for="item in msgs" :key="item">{{ item }}</li>
      </ul></div>
  </div>
</template><script>
import { createApp, ref, onMounted, nextTick } from 'vue';

const generateNumbers = (start, end) => {
  // ... (same as before) ...
};

const app = createApp({
  setup() {
    const msgs = ref(generateNumbers(1, 200));
    const chatlistref = ref(null);

    const scrollToBottom = async () => {
      const chatListElement = chatlistref.value;
      if (chatListElement) {
        chatListElement.scrollTop = chatListElement.scrollHeight;
      }
    };

    const handleScroll = (ev) => {
      const target = ev.target;
      if (target.scrollTop === 0) {
        msgs.value.unshift(...generateNumbers(201, 400));
        // 问题：此处加载新数据后，滚动条会回到顶部
      }
    };

    onMounted(() => {
      scrollToBottom();
    });

    return {
      msgs,
      chatlistref,
      handleScroll
    };
  }
});

app.mount('#app');
</script><style scoped>
/* ... (same as before) ... */
</style>

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

到这里，我们也就讲完了《Vue3实现微信聊天记录向上滚动加载技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！