# 分页符 PageIndicator

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/page-indicator
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

指示当前显示的是多页面视图的哪一页。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

指示当前显示的是多页面视图的哪一页。

## 何时使用

适用于表示当前内容区块可以横向滚动翻页。

## 示例

## PageIndicator

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 颜色 | `'primary' \| 'white'` | `'primary'` |
| current | 当前页（从 `0` 开始计数） | `number` | - |
| direction | 方向，默认是水平方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |
| total | 总页数 | `number` | - |

### CSS 变量

| 属性 | 说明 | 默认值 |
| --- | --- | --- |
| --active-dot-border-radius | 当前页的圆角大小 | `var(--dot-border-radius)` |
| --active-dot-color | 当前页的颜色 | `var(--adm-color-primary)` |
| --active-dot-size | 当前页的大小 | `13px` |
| --dot-border-radius | 非当前页的圆角大小 | `1px` |
| --dot-color | 非当前页的颜色 | `var(--adm-color-light)` |
| --dot-size | 非当前页的大小 | `3px` |
| --dot-spacing | 页码指示器小圆点之间的间距 | `3px` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt