116 lines
5.9 KiB
JSON
116 lines
5.9 KiB
JSON
{
|
||
"slug": "infinitescroll",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 InfiniteScroll：两条占位记录写死，靠 loading 与 status 两个 prop 切「加载更多」按钮的文案与禁用。",
|
||
"usage": [
|
||
"按钮文案是三层三元：loading 显示「加载中…」，status === 'done' 显示「已全部加载」，否则「加载更多」（frameworks/InfiniteScroll.jsx:8）。",
|
||
"禁用条件是组合判断 `disabled={loading || status === 'done'}`，加载中与加载完都不再可点（frameworks/InfiniteScroll.jsx:8）。",
|
||
"触发加载的唯一出口是按钮上的 onLoadMore，滚动到底不会自动触发（容器没有 onScroll）（frameworks/InfiniteScroll.jsx:8）。",
|
||
"items 数组未参与渲染：列表区是两条字面量 div（活动记录 1 / 活动记录 2），传多少条数据都只有这两行（frameworks/InfiniteScroll.jsx:4,8）。",
|
||
"height 是内联样式值，直接写进滚动容器的 `style={{ height }}`，需带单位（frameworks/InfiniteScroll.jsx:8）。",
|
||
"滚动容器带 role=\"feed\"，children 与 onChange / onClick / onClose / onSubmit 都未使用（frameworks/InfiniteScroll.jsx:4,8）。"
|
||
],
|
||
"bestPractices": [
|
||
"加载数据要接在 onLoadMore 上并自行管理 items 与 status：组件只负责按钮态与文案，列表数据不来自 props（frameworks/InfiniteScroll.jsx:8）。",
|
||
"status 只认 done 一个特殊值：传别的值都显示「加载更多」，结束态必须精确写 done（frameworks/InfiniteScroll.jsx:8）。",
|
||
"height 建议带单位（180px），传纯数字会生成无单位样式且高度失效（frameworks/InfiniteScroll.jsx:8）。",
|
||
"items 是空声明，别按它传数据；要让列表可变必须改实现里的 JSX（frameworks/InfiniteScroll.jsx:4,8）。"
|
||
],
|
||
"a11y": [
|
||
"滚动容器带 role=\"feed\"（frameworks/InfiniteScroll.jsx:8），语义上是可无限加载的信息流，与交互模型一致。",
|
||
"按钮文案随状态变化（加载中… / 已全部加载 / 加载更多），读屏器能读到当前状态（frameworks/InfiniteScroll.jsx:8）。",
|
||
"disabled 走原生属性，加载与结束态下按钮不可聚焦，读屏器播报不可用（frameworks/InfiniteScroll.jsx:8）。",
|
||
"role=\"feed\" 下没有 aria-busy，加载过程中读屏器不会播报正在更新（frameworks/InfiniteScroll.jsx:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props：loading 与 status 决定按钮文案/禁用、height 写内联样式，交互只有 onLoadMore 一个出口；items 未渲染，没有 v-model。",
|
||
"table": [
|
||
{
|
||
"name": "children",
|
||
"type": "属性",
|
||
"desc": "解构声明但 JSX 未渲染（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "height",
|
||
"type": "属性",
|
||
"desc": "内联样式值，写进滚动容器 style 的 height（frameworks/InfiniteScroll.jsx:8）"
|
||
},
|
||
{
|
||
"name": "items",
|
||
"type": "Array",
|
||
"desc": "数据项数组，声明默认空数组，列表区为两条字面量，未参与渲染（frameworks/InfiniteScroll.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"type": "属性",
|
||
"desc": "为真时按钮显示「加载中…」并 disabled（frameworks/InfiniteScroll.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onLoadMore",
|
||
"type": "属性",
|
||
"desc": "唯一加载出口：加载更多按钮点击时调用（frameworks/InfiniteScroll.jsx:8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onChange（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onClick（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定 onClose（frameworks/InfiniteScroll.jsx:4）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "插槽",
|
||
"desc": "React 无插槽语法，children 即默认子节点；本实现未渲染（frameworks/InfiniteScroll.jsx:4,8）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/InfiniteScroll.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/InfiniteScroll.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"infinitescroll-ex-1",
|
||
"infinitescroll-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构见 frameworks/InfiniteScroll.jsx:4，共 10 个；渲染全在第 8 行（role=\"feed\" 容器 + 两条字面量 + 状态按钮）。",
|
||
"按钮文案三元与 disabled 组合判断见 frameworks/InfiniteScroll.jsx:8；items 与 height 的消费情况同在第 4、8 行核对。",
|
||
"实现缺口：items 未参与渲染、无滚动监听（只有按钮触发）（frameworks/InfiniteScroll.jsx:8）；按实现写，未发明无限滚动观测。",
|
||
"a11y 依据：role=\"feed\" 与原生 disabled 见 frameworks/InfiniteScroll.jsx:8；全文无 aria-busy / aria-live。",
|
||
"apiCarrier.table 保留了自动生成时的「属性 + 事件 + 插槽」三套同名行（onChange / onClick / onClose / children 各两次），本次只改 desc 文案，未调整行结构。"
|
||
]
|
||
}
|