SuperAPI AI 工具集

infinite-scroll

通用与其它

查看项目

更新于 10-16 04:31

技能介绍

用途:无限滚动在用户向下滚动时动态追加内容,省去分页或手动点击,让浏览连续不断。常见于社交媒体信息流、新闻与博客、电商商品列表、搜索结果和媒体画廊。

主要能力:自动加载并追加新条目,保持用户沉浸;可与“加载更多”或分页作为替代方案并存。

使用方式:先确认该模式符合问题与约束,再参考 references/pattern.md 中的结构与示例,选择最小可行变体;先落实无障碍、性能和交互护栏,再做视觉打磨;用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。

无障碍要点:新内容应可通过键盘聚焦;用 aria-live="polite" 动态播报新内容;提供分页或“加载更多”替代;允许用户暂停或停止加载。避免仅依赖滚动,避免意外改变内容顺序。

限制与避免场景:用户需快速定位特定内容、需要结构化导航或比较、回看先前结果时,分页更合适;性能敏感时无限滚动可能导致高内存占用和渲染变慢;内容需要频繁交互(如表单)时可能造成干扰;若页脚重要,持续加载会让用户难以到达页脚。

相关模式:Load More 与 Pagination,详见 https://uxpatterns.dev/patterns/navigation/load-more 与 https://uxpatterns.dev/patterns/navigation/pagination。完整实现细节、示例与测试说明见 references/pattern.md,模式页为 https://uxpatterns.dev/patterns/navigation/infinite-scroll。