实现消息存档—微信聊天记录组件

前言

近期在处理业务时，涉及到了微信聊天记录消息存档的场景；接下来分析分析，实现微信聊天记录组件时，所需要注意的几点地方；

1. 分析原生微信聊天窗口

聊天窗口可分为PC端跟移动端，先看看PC端：

实现此聊天窗口，需要注意两点就是：

1. 每次进入新的聊天窗口时，页面都是至于最底部，以保证查看到最新消息；
2. 加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果；我们想要的是，查看更多时，此时历史的消息会添加到顶部去，此时滚动条还是在原来位置，以保证当前页面位置不变；

同时，在想想手机端，也是同样的效果。每次进入新的聊天窗口，页面都至于最底部；另外，向上滑动时，会进行历史消息的加载，并保持在原来位置

2. 分析实现效果

这里根据不同的端，分析不同的实现方式；

1. 移动端

1. 先将外层盒子翻转180°，这样可以改变默认的方向，能够使我们在进行滑动加载历史数据的时候，达到平滑流畅加载的一个效果；
2. 在设置盒子以及消息文本的direction属性，以优化翻转后的页面错乱
3. 根据实际情况，可自行优化其他元素的位置错乱

2. PC端

首先如果在PC端中，使用移动端的方法来实现此效果，虽然完美的解决了，加载数据时，保证当前页面位置不变的问题，但是会出现其他几个问题࿱