uni-app实现聊天记录下拉加载更多，滚动条划到顶部加载数据后仍停留在上次浏览的位置

最近在做一个类似微信聊天的功能，发现每次到顶部下拉加载新数据后，并不会停留在你浏览到的位置而是直接跳到整个聊天的顶部，显然这不是我们想要的结果，如何在下拉加载数据后停留在当前位置呢？我这里使用的是scroll-view+计算高度的方法实现的，如下图

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在触发滚动事件@scroll时，执行scroll函数计算出当前聊天可滚动区域的高度，保存到newheight里；在触顶时触发@scrolltoupper，执行请求数据的方法并重新计算scrollTop，注意，这里重新计算高度一定要放在$nextTick里，否则会计算出未更新dom前的高度。

还有就是第一次进入聊天对话，直接定位到底部，也可以使用计算高度来实现，非常简单就不多解释了，看图（我的fBtn就是底部的输入框，letterList是聊天区域的就高度）在这里插入图片描述

# uni-app # vue.js
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

cover

钱学森1954年就指出了今天AI的根本问题

avatar DAMO开发者矩阵

多智能体架构与模型上下文协议（MCP）全景规划方案

在“工业大模型 × 数字孪生 × 具身智能”深度交织的认知型智能制造系统（SoI）架构下，多智能体架构（Multi-Agent Architecture）与模型上下文协议（Model Context Protocol, MCP）的缝合，已成为硬科技离散制造与高端装备全生命周期服务（AI-PSS）中，打通工业异构多模态数据、消灭大模型长尾幻觉并保障工业级确定性安全反控的最新标准。

avatar DAMO开发者矩阵

使用概率图路径规划的机器人路径规划研究Octave（Matlab代码实现）

针对复杂未知环境下传统机器人路径规划算法适应性差、避障稳定性弱、全局搜索效率低的问题，本文开展基于概率图的机器人路径规划方法研究。概率图路径规划依托概率路线图建模思想，通过环境随机采样、节点连通性构建、最优路径检索的核心逻辑，摆脱了传统算法对环境精准建模的依赖，具备强环境适配性与高运算效率。本文系统阐述概率图路径规划的核心理论、运行机制与技术优势，基于Octave仿真平台搭建多场景机器人运动规划仿

avatar DAMO开发者矩阵