---
url: /mobile/components/load-more.md
---
# LoadMore 加载更多

列表尾部的加载状态条：idle（可点击 / 触底自动）→ loading（外部拉数据）→ idle（还有
数据）/ noMore（到底）/ error（失败点击重试）。状态由父级持有（`v-model:status`），
组件触发时置 `loading` 并发出 `load-more`——「何时加载」交给组件，「加载什么」留给
业务。触底检测用 IntersectionObserver，根为最近的滚动祖先，页面滚动容器与局部滚动区
都适用；替代移动端没有意义的页码器（见[移动端 · 页面导航](/mobile/navigation)）。

## 基础用法

点击状态条触发（`auto-load` 开启时滚动距底部 `preload` px 内也会自动触发）。加载两页
后转 noMore 收束。

```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