uni-app模仿微信聊天功能,上拉加载历史消息位置保持不变

原创

已于 2023-08-01 16:53:09 修改 · 3.7k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信 #javascript

于 2023-08-01 16:51:18 首次发布

本文介绍如何使用uni-app模仿微信聊天功能，重点在于上拉加载历史消息时保持滚动位置不变。通过`scroll-view`组件，结合`scroll-y`、`upper-threshold`、`scroll-into-view`等属性，以及`@scrolltoupper`事件监听，实现平滑滚动和数据加载。在获取消息列表时，需注意数据ID的处理和分页策略，确保在APP端能正确触发滚动事件。

uni-app模仿微信聊天功能,上拉加载历史消息位置保持不变

不废话，直接上图，依旧存在抖动问题，H5不明显，app比较明显。
在这里插入图片描述

标签属性

scroll-y 允许纵向滚动

upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件

scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

@scrolltoupper 滚动到顶部/左边，会触发 scrolltoupper 事件

HTML部分

<scroll-view class="scroll-view_H" :style="{ height: centerHeight + 'px' }" scroll-y upper-threshold="20"
	@scrolltoupper="scrollTop" scroll-anchoring="true" :scroll-into-view="childrenId">
	<view class="chat_content_li" v-for="(item,index) in chatList