实现类似微信聊天记录的向上滚动加载
在使用vue开发类似微信聊天的聊天记录页面时,用户常常希望在向上滚动到顶部时能够加载更多的聊天记录,并且希望滚动条能够停留在当前位置,而不是跳到最顶部。接下来我们将探讨如何实现这一效果。
首先,我们来看一下提供的代码示例:
- {{ item }}
在这个示例中,handlescroll 函数会在用户滚动到顶部时触发,尝试加载更多数据并将其添加到列表的开头。然而,用户希望在添加新数据后,滚动条能够保持在当前位置。
为了实现这个效果,我们需要在添加新数据后,重新设置 scrolltop 的值,使其保持在添加新数据前的位置。我们可以这样修改 handlescroll 函数:
const handleScroll = (ev) => {
const target = ev.target;
if (target.scrollTop === 0) {
const currentScrollHeight = target.scrollHeight;
msgs.value.unshift(...generateNumbers(201, 400));
nextTick(() => {
target.scrollTop = target.scrollHeight - currentScrollHeight;
});
}
}通过记录添加新数据前的 scrollheight,然后在添加新数据后,重新设置 scrolltop 为 target.scrollheight - currentscrollheight,这样就可以保持滚动条的位置不变。
立即学习“前端免费学习笔记(深入)”;
这个调整后的代码将实现用户期望的效果:当向上滚动到顶部加载更多聊天记录时,滚动条不会跳到最顶部,而是停留在当前位置。











