SuperAPI AI 工具集

infinite-scroll-fullstack

通用与其它

查看项目

更新于 10-16 06:18

技能介绍

用途:端到端实现无限滚动列表,覆盖后端游标分页 API、前端触发加载、加载状态与滚动位置保持。

主要能力:推荐游标分页而非 offset,游标用 base64 不透明字符串编码排序键与 id 以处理并列;后端用 take: limit + 1 判断是否有下一页,返回 { items, nextCursor },nextCursor 为 null 表示结束。前端用 React Query 的 useInfiniteQuery,getNextPageParam 返回 undefined 表示无下一页,页面用 flatMap 展平。用 IntersectionObserver 监听底部哨兵元素,rootMargin 设为 200px 提前预取;哨兵始终渲染,翻页守卫放在回调内。滚动位置用 sessionStorage 保存与恢复,列表项用 content-visibility: auto 与 contain-intrinsic-size 减少布局偏移。顶部插入新内容的 feed 采用缓冲加“N 条新内容”横幅模式。加载状态区分初始骨架屏、翻页 spinner、列表结束提示、空状态与错误重试。

使用方式:按资料中的代码模式实现,涉及 encodeCursor/decodeCursor、Prisma findMany、useInfiniteQuery、useInfiniteScrollTrigger 等。

限制:资料未提供安装命令、依赖版本、具体框架适配范围与性能基准,暂未提供。