vue3实现类似微信聊天向上滚动，查看历史消息功能,并滚动到上一次查看位置

九段刀客

已于 2023-12-18 03:05:10 修改

阅读量4.2k

点赞数 3

分类专栏： vue3 文章标签： javascript 前端 vue.js

于 2022-06-16 18:21:24 首次发布

本文链接：https://blog.csdn.net/weixin_35958891/article/details/125320978

版权

vue3 专栏收录该内容

27 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用`scrollIntoView`方法实现聊天记录列表的滚动定位，确保用户能回到上次查看的位置。同时，通过监听滚动事件和上滑触底条件，动态加载聊天历史分页，保持用户体验的连贯性。代码示例展示了如何维护一个引用对象以保存DOM节点，并在数据更新后利用`nextTick`更新视图并滚动到指定消息ID对应的节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现逻辑：使用scrollIntoView方法，通过上一次列表的第一条的id对应的dom，滚动到指定位置

<div  ref="ref_messages" @scroll="scroll_main_box">
        <div
          v-for="item in messages"
          :key="item.id"
          :ref="
            (el) => {
              ref_messages_nodes[item.id] = el;
            }
          "
        >
//其他的内容
	</div>
</div>

ref_messages_nodes.value[top_id].scrollIntoView();回到上一次查看的位置

const ref_messages_nodes = ref({});
// 上滑触底获取历史聊天分页列表
function scroll_main_box(e) {
  let scrollTop = e.target.scrollTop;
  if (scrollTop == 0) {
    if (data.messages.length < chat_history_params.value.total) {
      let top_id = data.messages[0].id;
      chat_history_params.value.current = chat_history_params.value.current + 1;

      api_getMsgByChatId(chat_history_params.value).then((res) => {
        data.messages = [...res.data.list, ...data.messages];
        chat_history_params.value.total = res.data.total;

        // 将滚动条设置到上次查看的位置
        nextTick(() => {
          console.log(ref_messages_nodes.value, top_id);
          ref_messages_nodes.value[top_id].scrollIntoView();
        });
      });
    }
  }
}