---
url: /mobile/content.md
---
# 内容流

官网的内容型页面（文章、案例、动态）在移动端是一条**单列内容流**：顶部下拉刷新
对齐原生 App 手感，尾部加载更多替代页码器。EvPullRefresh 与 EvLoadMore 组合即成
完整闭环，业务只需提供「取数据」函数。

## 刷新 + 加载闭环

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

const refreshing = ref(false)
const loadStatus = ref('idle')
const posts = ref([])
let page = 0

async function onRefresh() {
  posts.value = await fetchLatest()
  page = 1
  refreshing.value = false // 置 false 自动展示「刷新成功」并收回
}
async function onLoadMore() {
  const next = await fetchPage(++page) // 组件触发时已置 loading
  posts.value.push(...next)
  loadStatus.value = next.length ? 'idle' : 'noMore'
}
</script>

<template>
  <EvPullRefresh v-model="refreshing" @refresh="onRefresh">
    <ArticleCard v-for="p in posts" :key="p.id" v-bind="p" />
    <EvLoadMore v-model:status="loadStatus" :preload="40" @load-more="onLoadMore" />
  </EvPullRefresh>
</template>
```

## 卡片表达

桌面 ArticleCard 的多栏网格在移动端降为**整宽卡片流**：主行标题 + 一行摘要 + 元信息，
封面可选。卡片保留静态信息（触屏无 hover），整卡可点进详情，不做「卡片上的第二个
操作按钮」。

规则：

* **刷新与加载分离**：PullRefresh 管顶部、LoadMore 管尾部，不要把刷新按钮放在页面里。
* **空态与尾态**：没有数据给引导文案（Empty），加载到底给 noMore 收束——组件已内置
  「没有更多了」，不要自绘第二份。