下拉加载更多 记录当前位置。同微信聊天效果(锚点方式)
2021-05-11 本文已影响0人
Spidd
// dom
<div className={style['system-message-row']} key={id} id={`system-message-${id}`}>
...
</div>
// js
/* 由于数据更新一定是处于第一条数据处。
所以这里获取历史数据中的第一条。
加载完成后。获取锚点位置更新scroll位置 */
// 上一次数据的第一条数据的id
const firstDataId = dot.get(systemMessageList[0], '_id');
// 上一次数据的第一条数据的dom
const firstDataDom = document.querySelector(`#system-message-${firstDataId}`);
await utils.lazy(60);
// 更新位置
setBottom(firstDataDom.offsetTop);