反向scroll-view 完美实现聊天记录列表功能
发布于 3 年前 作者 yan43 2576 次浏览 来自 分享

需求:需要实现聊天室功能,聊天记录倒序,下拉滚动到顶部后,加载更多历史消息。

初步方案:跟社区里大多数一样,把数据按倒序存放,最新的聊天记录放最后面,最旧的放前面。 5 4 3 2 1,倒序。 然后滚动到顶部,拉取10 9 8 7 6后,放入列表为10 9 8 7 6 5 4 3 2 1。这个时候就会出现scroll-view自动滚动到顶部问题。尝试过保持scroll-top的位置,效果不理想,会闪烁,而且在ios真机上无效。

思考和修改方案:正常的列表上拉加载更多是正常的,只要列表的数据头部增加会导致这个问题。 考虑采用正常顺序,使用样式来反向列表显示:

1、消息数据:1 2 3 4 5, 请求到更多历史消息 10 9 8 7 6后,存入列表后面为:1 2 3 4 5 6 7 8 9 10.

2、scroll-view设置enable-flex属性为true。 添加样式:

display: flex; flex-direction: column-reverse;

3、bindscrolltoupper监听加载更多历史消息

完美适配,体验也比较完美

1 回复

正好要做这个功能,不错。

回到顶部