vue 滚动到顶部时加载更多数据，但保持滚动位置不变
在某些场景中，我们需要类似微信聊天记录那样，当用户向上滚动到顶部时加载更多历史记录，但滚动条位置依然保持在当前位置。
下面提供一种解决方法：
- {{ item }}
import { createApp, ref, nextTick } from 'vue'createApp({ setup() { const msgs = ref([]) const chatListRef = ref() const scrollToBottom = async () => { const chatListElement = chatListRef.value if (chatListElement) { chatListElement.scrollTop = chatListElement.scrollHeight } } const handleScroll = (ev) => { const target = event.target if (target.scrollTop === 0) { // TODO: 加载更多数据 alert('添加完数据后希望停留在当前数据的位置，而不是最顶部') } } nextTick(() => { scrollToBottom() }) return { msgs, chatListRef, handleScroll } }}).mount('#app')
当向上滚动到顶部时，handlescroll 函数会被触发，此时可以判断 scrolltop 是否为 0，如果是，则加载更多数据并更新 msgs 数组。关键在于，在加载更多数据后，需要调用 scrolltobottom 函数将滚动条位置调整回当前位置。
立即学习“前端免费学习笔记（深入）”；
请注意，你可以根据需要修改 scrolltobottom 函数中的滚动行为。
以上就是Vue中如何实现滚动到顶部加载更多数据且保持滚动位置不变？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1498802.html
微信扫一扫 
支付宝扫一扫 
