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虚拟列表查看微信聊天记录的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序实现多行文字滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JS点击动态添加标签、删除指定标签的代码，在文中给大家补充介绍了js 更加轮播图图片张数动态生成小圆点的方法，需要的朋友参考下实现代码2018-04-04
这篇文章主要介绍了JavaScript中使用参数个数实现重载功能,需要的朋友可以参考下2017-09-09
将Url进行编码,前台JS需要使用这段内容,这时候就需要解码了2010-01-01
这篇文章主要介绍了基于函数执行的踩坑(addEventListener)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
前端开发中异步与同步处理分别适用不同场景,异步操作如网络请求、文件读写等,而同步处理适用于简单、线性任务,异步处理可通过回调函数、Promise、async/await等方式优化,提高代码效率和可维护性,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了JavaScript装饰者模式原理与用法,结合实例形式总结分析了JavaScript装饰者模式相关概念、功能、原理、用法及操作注意事项,需要的朋友可以参考下2020-03-03
JavaScript是一种强大的脚本语言,广泛应用于Web开发中,本文将通过一个完整的项目实例,演示如何使用JavaScript来实现一个交互式的待办事项列表,,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Javascript中的对象属性是有序的吗，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
最新评论