在最近的开发工作中,遇到了一个聊天场景的应用(Web 和小程序),类似于我们再熟悉不过的 QQ 和微信,一个正常的聊天界面是大致上是长这个样子的:
这种聊天窗口的消息流有两个明显的特点:一是最新的消息和滚动条初始位置需要在列表的最底部,二是下拉加载历史消息后要在当前消息列表的顶部进行衔接。
一般来说要实现这样的功能,对于前端开发来说都不是难事,只要两步就可以了:首先,在第一屏消息渲染完之后设置容器的 scrollTop
为一个极大值,这样就把最新消息和滚动条初始位置定位到了最底部;然后,当滚动到顶部时渲染第二屏数据,接着设置容器的 scrollTop
为衔接的位置(也就是第二屏的总高度),这样就实现了前后两屏消息的衔接。这样的 demo 只需要随手撸二三十行代码就实现了: