如何在SwiftUI中实现支持指定页跳转、上下双向加载的真分页列表

你要的这个效果核心是双向虚拟滚动+滚动锚定补偿，和普通只追加底部的load more逻辑差异不大，唯一要解决的核心问题是顶部插入内容时不要让用户感知到页面跳动，具体实现步骤如下：

1. 初始跳页的基础结构 #

拿到URL里的目标分页参数（比如page=3）后，不需要从第1页开始加载，直接请求目标页数据渲染即可，同时加两个占位容器：

• 顶部占位：高度 = (目标页码 - 1) * 单页预估高度，用来承载前面没加载的分页位置
• 底部占位：高度 = (总页数 - 目标页码) * 单页预估高度，用来承载后面没加载的分页位置
  初始DOM结构参考：

<!-- 顶部占位，单页预估高度可以先按历史平均值给，比如每页3条共600px -->
<div class="top-sentinel" style="height: 1200px"></div>
<!-- 初始渲染的目标页内容 -->
<div class="page-item page-3">
  <div>F</div>
  <div>G</div>
  <div>H</div>
</div>
<!-- 底部占位 -->
<div class="bottom-sentinel" style="height: calc((var(--total-page) - 3) * 600px)"></div>

初始加载完直接把滚动容器的scrollTop设为顶部占位的高度，用户打开链接第一眼就落在目标页内容上，不会出现从第1页跳过来的闪烁。

2. 双向加载触发逻辑 #

用IntersectionObserver监听上下两个占位元素的可见性，比监听scroll事件性能好很多：

• 当底部占位进入视口阈值范围（比如距离视口底部200px时），请求下一页数据，追加到已渲染内容的最末尾，同时把底部占位高度减去一个单页高度
• 当顶部占位进入视口阈值范围（比如距离视口顶部200px时），请求上一页数据，准备插入到已渲染内容的最前面

3. 顶部加载无跳动的核心：偏移补偿 #

绝大多数人做顶部加载会遇到内容插入后页面突然下跳的问题，本质是DOM插入后内容总高度增加，但浏览器默认保持scrollTop（滚动条距离顶部的距离）不变，原本在视口里的内容就会被挤下去。
解决方法是同步做滚动位置修正，步骤非常简单：

1. 插入新的上一页内容前，先记录两个值：当前滚动容器的scrollTop、当前已渲染内容区域的总高度oldHeight
2. 把请求回来的上一页DOM插入到顶部占位之后、原有已渲染内容之前
3. 重新计算插入后的已渲染内容总高度newHeight，算出高度差delta = newHeight - oldHeight
4. 同步把滚动容器的scrollTop设置为原scrollTop + delta
   这一步是同步执行的，浏览器不会产生中间渲染帧，用户完全感知不到内容插入的过程，会觉得上一页的内容本来就在那里。
   举个实际数值例子：

• 插入第2页前，scrollTop是1200px，已渲染内容只有第3页，总高度600px
• 插入第2页后，已渲染内容总高度变成1200px，高度差是600px
• 直接把scrollTop设为1200 + 600 = 1800px，用户视线里的第3页内容位置完全没有变化。

4. 体验优化点 #

• 动态修正高度：每加载完一页实际内容，测量这页的真实渲染高度，更新你维护的单页平均高度值，同步修正上下占位的高度，避免长距离滚动时位置出现偏差。如果页内有图片这类异步加载的资源，要么提前给图片设aspect-ratio占位，要么等资源加载完后补做一次scrollTop修正，避免内容加载后出现位置漂移。
• DOM裁剪：如果用户连续翻了几十页，已渲染的DOM节点太多会导致卡顿，可以把离视口超过2页距离的内容删掉，把对应高度算到上下占位里，始终保持DOM里只存在视口附近的5-6页内容，哪怕总页数有几万页滚动也不会卡。
• URL同步：用户滚动到新的页面进入视口时，用history.replaceState更新URL里的page参数，和Google搜索的行为一致，用户刷新、分享链接都能直接回到当前浏览位置，分页控件的高亮状态也同步绑定当前视口最顶部的可见页码即可。
• 节流处理：如果不用IntersectionObserver而是用scroll事件监听，记得给回调加16ms的节流，避免频繁触发计算影响滚动流畅度。

内容的提问来源于stack exchange，提问作者mamcx