Vue.js实现微信式聊天记录向上滚动加载，滚动条位置不变
本文介绍如何在Vue.js中构建类似微信聊天记录的向上滚动加载功能，避免滚动条自动回滚到顶部。
现有代码已实现向上滚动加载更多记录，但新数据加载后，滚动条会回到顶部。为了解决这个问题，我们需要记录滚动位置，并在加载新数据后恢复该位置。
改进后的代码如下：
import { createApp, ref, nextTick } from 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-ms/vue/3.2.31/vue.esm-browser.prod.min.js';function generateNumbers(start, end) { if (!Number.isInteger(start) || !Number.isInteger(end)) { throw new Error('Start and end must be integers.'); } if (start > end) { throw new Error('Start must be less than or equal to end.'); } return Array.from({ length: end - start + 1 }, (_, i) => start + i);}createApp({ setup() { const msgs = ref(generateNumbers(1, 200)); const chatListRef = ref(null); let prevScrollTop = 0; // 新增：记录之前的滚动条位置 const scrollToBottom = async () => { const chatListElement = chatListRef.value; if (chatListElement) { chatListElement.scrollTop = chatListElement.scrollHeight; } }; const handleScroll = (ev) => { const target = ev.target; prevScrollTop = target.scrollTop; // 新增：记录滚动条位置 if (target.scrollTop === 0) { const scrollHeightBefore = target.scrollHeight; msgs.value.unshift(...generateNumbers(msgs.value.length + 1, msgs.value.length + 200)); nextTick(() => { const scrollHeightAfter = target.scrollHeight; target.scrollTop = scrollHeightAfter - scrollHeightBefore + prevScrollTop; // 恢复滚动条位置 }); } }; nextTick(() => scrollToBottom()); return { msgs, chatListRef, handleScroll }; },}).mount('#app');* { margin: 0; padding: 0;}html,body { height: 100vh; background-color: #e9f5f8;}.container { width: 200px; height: 500px; overflow-y: auto; background-color: #fff;}
- {{ item }}
关键改进：
立即学习“前端免费学习笔记（深入）”；
添加 prevScrollTop 变量记录之前的滚动条位置。在 handleScroll 中，每次滚动时都更新 prevScrollTop。加载新数据后，使用 nextTick 确保 DOM 更新完成，然后计算并设置新的 scrollTop 值，使其保持在加载数据前的相对位置。 target.scrollTop = scrollHeightAfter - scrollHeightBefore + prevScrollTop; 这行代码计算了需要调整的滚动距离，确保滚动条位置不变。
通过这些修改，实现了在向上滚动加载新数据时，滚动条位置保持不变的效果，提升用户体验。 代码也使用了更简洁的 Array.from 方法生成数字序列。
以上就是如何在Vue中实现类似微信聊天记录的向上滚动加载功能而不让滚动条自动回到顶部？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503582.html
微信扫一扫 
支付宝扫一扫 
