uniapp使用vue3+ts的聊天对话框

先看一下效果图

通过scroll-view实现消息的刷新和滑动，能查看消息和发送图片，支持图片数量自定义。
其中主要是scroll-view通过id定位滑动，当有新消息滑动到最底部，上拉能够刷新历史消息；当选择图片的时候，输入框根据选择的图片数量高度进行调整；
因为拿到的消息列表是正序的，然后再列表显示上需要进行颠倒一下，所以这里有一种方式就是使用flex排序的column-reverse进行消息的倒序方式
就是使用 flex-direction: column-reverse
当新增消息之后，把消息插入到列表，根据消息的发送状态进行修改消息单条信息状态。拿到消息的引用ref，然后用ref进行修改状态。
代码链接