本文介绍了如何在uni-app中解决聊天应用中下拉加载新消息后滚动条不保持原浏览位置的问题。通过使用scroll-view和计算高度的方法，当触发@scrolltoupper事件时，不仅加载新数据，还确保在$nextTick中更新DOM后重新计算scrollTop，以保持聊天记录的滚动位置。此外，文章还提及了首次进入聊天室时如何将聊天记录定位到底部。
uni-app实现聊天记录下拉加载更多，滚动条划到顶部加载数据后仍停留在上次浏览的位置
最近在做一个类似微信聊天的功能，发现每次到顶部下拉加载新数据后，并不会停留在你浏览到的位置而是直接跳到整个聊天的顶部，显然这不是我们想要的结果，如何在下拉加载数据后停留在当前位置呢？我这里使用的是scroll-view+计算高度的方法实现的，如下图
在触发滚动事件@scroll时，执行scroll函数计算出当前聊天可滚动区域的高度，保存到newheight里；在触顶时触发@scrolltoupper，执行请求数据的方法并重新计算scrollTop，注意，这里重新计算高度一定要放在$nextTick里，否则会计算出未更新dom前的高度。
还有就是第一次进入聊天对话，直接定位到底部，也可以使用计算高度来实现，非常简单就不多解释了，看图（我的fBtn就是底部的输入框，letterList是聊天区域的就高度）
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
