JS使用虛擬列表查看微信聊天記錄功能技巧實(shí)例

更新時(shí)間：2023年10月31日 08:52:06 作者：HeiYanjing

這篇文章主要為大家介紹了JS使用虛擬列表查看微信聊天記錄功能技巧實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

PC端微信聊天記錄查看

這個功能是pc端程序,實(shí)現(xiàn)手機(jī)端微信聊天記錄查看功能

功能問題點(diǎn)

1，默認(rèn)看到的記錄是倒序排列，頁面最底下一條是最近一條消息

2，聊天記錄可能存在無限往上翻閱的情況，dom無法承載如此多消息，需要使用虛擬列表

3, 向上向下翻閱過程中，滑動到上一頁或者下一頁如何定位當(dāng)前頁面最后一條第一條在當(dāng)前，絲滑加載，不出現(xiàn)‘閃跳’情況

4，動態(tài)加載，考慮接口性能，一次請求數(shù)據(jù)不能太多，如何維護(hù)整個消息列表信息

一，消息記錄數(shù)據(jù)結(jié)構(gòu)

需要一個msgData字段來存儲所有從接口返回來的消息，{data,random}隨機(jī)數(shù)用于表示數(shù)據(jù)向下傳遞時(shí)表示是更新，初始值是0，每一條消息都有一個msgId字段，用于標(biāo)識當(dāng)前收到的消息記錄中歷史最遠(yuǎn)的一條記錄id。消息上滑下滑根據(jù)滑動方向，以及msgId可以判斷是從內(nèi)存取數(shù)據(jù)還是額外請求接口。

二，數(shù)據(jù)展示

傳入的random字段用于標(biāo)識是第一次傳入還是數(shù)據(jù)更新，如果是第一次傳入，新建一個宏任務(wù)，計(jì)算傳入數(shù)據(jù)展示成相應(yīng)元素之后的高度，

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

如果是更新，需要計(jì)算目前內(nèi)存中數(shù)據(jù)條數(shù)（數(shù)量小于顯示界面數(shù)據(jù)閾值就追加）以及滾動方向，來獲取相應(yīng)的顯示數(shù)據(jù)。

計(jì)算過程中，累加元素的getBoundingClientRect().height來計(jì)算當(dāng)前展示元素的高度，計(jì)算高度的同時(shí)，還需要把對應(yīng)的dom元素渲染到頁面中。

滾動

const scrollTop = virtualRef.current.scrollTop;
  direction = scrollTop < currentScroll ? 'down' : 'up';
    currentDirection = direction;
    currentScroll = scrollTop;
    // 計(jì)算滾動條到底部距離，保證異步加載元素位置不變的關(guān)鍵
    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);

滾動時(shí)需要計(jì)算當(dāng)前滾動方向，根據(jù)方向再進(jìn)行下面的計(jì)算，這里需要分為上滑和下滑。

下滑到底時(shí)，如果距離頂部小于50，就要觸發(fā)計(jì)算，根據(jù)當(dāng)前頁面元素第一條的索引值去內(nèi)存中找15條，當(dāng)前頁面元素尾部去掉15條重新拼湊成需要展示到頁面的完整數(shù)據(jù)，然后計(jì)算出scrollHeight,實(shí)現(xiàn)順滑滑動。

上滑到頂，距離底部小于50，觸發(fā)計(jì)算，計(jì)算方式和下滑相反。

以上就是JS使用虛擬列表查看微信聊天記錄功能技巧實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于JS虛擬列表查看微信聊天記錄的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: