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

前言

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

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

聊天窗口可分为PC端跟移动端,先看看PC端:
在这里插入图片描述
实现此聊天窗口,需要注意两点就是:

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

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

2. 分析实现效果

这里根据不同的端,分析不同的实现方式;

1. 移动端

在这里插入图片描述

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值