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

更新时间：2023年10月31日 08:52:06 作者：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虚拟列表查看微信聊天记录的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript如何对图片进行黑白化
这篇文章主要介绍了JS对图片进行黑白化的实现代码,需要的朋友可以参考下
2018-04-04
使用tree shaking 移除无用代码
这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
序列化模块json代码实例详解
这篇文章主要介绍了序列化模块json代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-03-03
一个鼠标移动滑出层效果的实现代码
一个鼠标移动滑出层的代码，根据网上的视频教程学习的，这也算是第一次练手吧，鼠标靠近复选框的时候，就会显示出一个层，移开则消失。
2011-08-08
webpack-bundle-analyzer 插件配置使用方法
webpack-bundle-analyzer 是 webpack 的插件，需要配合 webpack 和 webpack-cli 一起使用，这篇文章主要介绍了webpack-bundle-analyzer 插件配置,需要的朋友可以参考下
2023-02-02
JavaScript数组操作之旋转二维数组
这篇文章主要介绍了JavaScript数组操作之旋转二维数组,主要从两个方面展开文章介绍，一是通过对数组的操作熟练度；二是（镜像反转）比实现一更优，减少了空间复杂度，内容介绍具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
css如何让浮动元素水平居中
css中对于定宽的非浮动元素用margin:0 auto进行水平居中，对于不定宽的浮动元素也有一个常用技巧，这篇文章就给大家介绍下css如何让浮动元素水平居中，需要的朋友可以来学习下
2015-08-08
TypeScript接口和类型的区别小结
在 TypeScript 中，有两种主要的定义自定义类型的方式，接口和类型，尽管它们在外观上可能相似，但它们之间有一些关键的区别，本文就详细的介绍一下，感兴趣的可以了解下
2023-05-05
基于JavaScript实现手机短信按钮倒计时(超简单)
在淘宝等购物网站，我们都会看到一个发送短信倒计时的按钮，究竟是如何实现的呢？下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时，需要的朋友参考下
2015-12-12
自制简易打赏功能的实例
下面小编就为大家带来一篇自制简易打赏功能的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09