移动端专属组件
LoadMore 加载更多
列表尾部的加载状态条：idle（可点击 / 触底自动）→ loading（外部拉数据）→ idle（还有 数据）/ noMore（到底）/ error（失败点击重试）。状态由父级持有（v-model:status）， 组件触发时置 loading 并发出 load-more——「何时加载」交给组件，「加载什么」留给 业务。触底检测用 IntersectionObserver，根为最近的滚动祖先，页面滚动容器与局部滚动区 都适用；替代移动端没有意义的页码器（见移动端 · 页面导航）。
基础用法
点击状态条触发（auto-load 开启时滚动距底部 preload px 内也会自动触发）。加载两页 后转 noMore 收束。
内容条目 #1
内容条目 #2
内容条目 #3
内容条目 #4
内容条目 #5
内容条目 #6
html
<div class="list">
<Item v-for="i in items" :key="i" />
<eb-load-more v-model:status="status" :preload="40" @load-more="onLoad" />
</div>js
async function onLoad() {
const next = await fetchPage(++page)
items.value.push(...next)
status.value = next.length ? 'idle' : 'noMore' // 还有数据回 idle，到底转 noMore
}失败重试
加载失败时父级把状态置 error，状态条转警示色，点击即重试（重新发出 load-more）。
API
LoadMore Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| status | 列表状态（v-model:status），由父级持有 | 'idle' | 'loading' | 'noMore' | 'error' | 'idle' |
| auto-load | 触底自动加载（IntersectionObserver，根为最近滚动祖先） | boolean | true |
| preload | 触底提前量（px），距底部多远开始预加载 | number | 0 |
| disabled | 禁用触发 | boolean | false |
| loading-text / no-more-text | 加载中 / 到底文案 | string | 加载中… / 没有更多了 |
| error-text / idle-text | 失败重试 / 待加载文案 | string | 加载失败，点击重试 / 加载更多 |
LoadMore Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| load-more | 触发加载（点击/触底/重试），发出前组件已置 loading | — | — |
| update:status | v-model:status 同步 | (status) => void | — |
LoadMore Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 自定义状态条内容 | { status } | 状态文案 |
| loading | 自定义加载指示 | — | 旋转 spinner |