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

`EvLoadMore` 是列表尾部的加载状态条：idle（可点击 / 触底自动）→ loading（外部拉数据）
→ idle（还有数据）/ noMore（到底）/ error（失败点击重试）。状态由父级持有
（`v-model:status`），组件触发时置 `loading` 并发出 `load-more`，把「何时加载」交给组件、
「加载什么」留给业务。触底检测用 IntersectionObserver，根为最近的滚动祖先，页面滚动
容器与局部滚动区都适用。

## 基础用法

```vue
<script setup>
import { ref } from 'vue'

const status = ref('idle')
const items = ref([1, 2, 3, 4, 5, 6])
let page = 1

async function onLoad() {
  const next = await fetchPage(++page)
  items.value.push(...next)
  status.value = next.length ? 'idle' : 'noMore' // 还有数据回 idle，到底转 noMore
}
</script>

<template>
  <div class="list">
    <Item v-for="i in items" :key="i" />
    <EvLoadMore v-model:status="status" :preload="40" @load-more="onLoad" />
  </div>
</template>
```

## 失败重试

加载失败时父级把状态置 `error`，状态条转警示色，点击即重试（重新发出 `load-more`）。

```vue
<EvLoadMore v-model:status="status" @load-more="onLoad" />
```

## API

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| status | `'idle' \| 'loading' \| 'noMore' \| 'error'` | 'idle' | 列表状态（v-model:status），由父级持有 |
| auto-load | boolean | true | 触底自动加载（IntersectionObserver，根为最近滚动祖先） |
| preload | number | 0 | 触底提前量（px），距底部多远开始预加载 |
| disabled | boolean | false | 禁用触发 |
| loading-text | string | 加载中… | loading 态文案 |
| no-more-text | string | 没有更多了 | noMore 态文案 |
| error-text | string | 加载失败，点击重试 | error 态文案 |
| idle-text | string | 加载更多 | idle 态文案 |

### 事件

| 名称 | 参数 | 说明 |
| --- | --- | --- |
| load-more | — | 触发加载（点击/触底/重试），发出前组件已置 loading |
| update:status | (status) | v-model:status 同步 |

### 插槽

| 名称 | 参数 | 说明 |
| --- | --- | --- |
| default | { status } | 自定义状态条内容 |
| loading | — | 自定义加载指示 |