javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS虚拟列表查看微信聊天记录

JS使用虚拟列表查看微信聊天记录功能技巧实例

作者:HeiYanjing

这篇文章主要为大家介绍了JS使用虚拟列表查看微信聊天记录功能技巧实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

PC端 微信聊天记录查看

这个功能是pc端程序,实现手机端微信聊天记录查看功能

功能问题点

1,默认看到的记录是倒序排列,页面最底下一条是最近一条消息

2,聊天记录可能存在无限往上翻阅的情况,dom无法承载如此多消息,需要使用虚拟列表

3, 向上向下翻阅过程中,滑动到上一页或者下一页如何定位当前页面最后一条第一条在当前,丝滑加载,不出现‘闪跳’情况

4,动态加载,考虑接口性能,一次请求数据不能太多,如何维护整个消息列表信息

一,消息记录数据结构

需要一个msgData字段来存储所有从接口返回来的消息,{data,random}随机数用于表示数据向下传递时表示是更新,初始值是0,每一条消息都有一个msgId字段,用于标识当前收到的消息记录中历史最远的一条记录id。消息上滑下滑根据滑动方向,以及msgId可以判断是从内存取数据还是额外请求接口。

二,数据展示

传入的random字段用于标识是第一次传入还是数据更新,如果是第一次传入,新建一个宏任务,计算传入数据展示成相应元素之后的高度,

const virtualItems = document.getElementById('vir-scroll');
        virtualItems.scrollTop = timeFilter ? 0 : virtualItems.scrollHeight; // 如果timefilter 为真,scroll到顶部
        currentScroll = timeFilter ? 0 : virtualItems.scrollHeight;

如果是更新,需要计算目前内存中数据条数(数量小于显示界面数据阈值就追加)以及滚动方向,来获取相应的显示数据。

计算过程中,累加元素的getBoundingClientRect().height来计算当前展示元素的高度,计算高度的同时,还需要把对应的dom元素渲染到页面中。

滚动

const scrollTop = virtualRef.current.scrollTop;
  direction = scrollTop < currentScroll ? 'down' : 'up';
    currentDirection = direction;
    currentScroll = scrollTop;
    // 计算滚动条到底部距离,保证异步加载元素位置不变的关键
    bottomDistance = virtualRef.current.scrollHeight - virtualRef.current.clientHeight - virtualRef.current.scrollTop;
    const lastMsgId = direction === 'up' ? +items[items.length - 1]?.key : +items[0]?.key;
    const indx = wrapperData?.data?.findIndex((elm:any) => elm.msgTime === lastMsgId);

滚动时需要计算当前滚动方向,根据方向再进行下面的计算,这里需要分为上滑和下滑。

下滑到底时,如果距离顶部小于50,就要触发计算,根据当前页面元素第一条的索引值去内存中找15条,当前页面元素尾部去掉15条重新拼凑成需要展示到页面的完整数据,然后计算出scrollHeight,实现顺滑滑动。

上滑到顶,距离底部小于50,触发计算,计算方式和下滑相反。

以上就是JS使用虚拟列表查看微信聊天记录功能技巧实例的详细内容,更多关于JS虚拟列表查看微信聊天记录的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文