---
title: 页面配置
summary: "介绍小程序页面 JSON 配置项，包括导航栏样式、下拉刷新、滚动控制、自定义组件引用等窗口设置。"
questions:
  - 页面配置和全局配置 app.json 之间的优先级关系是怎样的？
  - 如何通过页面 json 配置开启下拉刷新功能？
  - navigationStyle 设置为 custom 后会有什么效果？
  - usingComponents 中声明组件路径支持哪几种形式？
  - 如何配置页面的导航栏背景颜色和标题文字？
  - disableScroll 和 enablePullDownRefresh 配置项分别控制什么？
  - boardMenus 自定义菜单配置的容器版本要求是什么？
  - pageOrientation 配置支持哪些屏幕旋转取值？
---

`[pagePath].json` 文件用于配置当前页面的窗口表现。页面配置比 `app.json` 全局配置简单得多，只能设置 `window` 相关配置项，但无需写 `window` 这个键。页面配置项会优先于全局配置项。

## 配置项

用于设置小程序当前页面的状态栏、导航条、标题、窗口背景色。

| 属性                         | 类型     | 默认值   | 描述                                                                                               |
| ---------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------- |
| backgroundColor              | HexColor | #ffffff  | 窗口的背景色。                                                                                     |
| backgroundColorBottom        | string   | #ffffff  | 底部窗口的背景色，仅 iOS 支持。                                                                    |
| backgroundColorTop           | string   | #ffffff  | 顶部窗口的背景色，仅 iOS 支持。                                                                    |
| backgroundTextStyle          | string   | dark     | 下拉 loading 的样式，仅支持 `dark` 和 `light`。                                                    |
| disableScroll                | boolean  | false    | 是否禁用页面滚动。默认 `false`。开启后页面将无法滚动。                                             |
| enablePullDownRefresh        | boolean  | false    | 是否开启全局的下拉刷新。                                                                           |
| navigationBarBackgroundColor | HexColor | #ffffff  | 导航栏背景颜色，如 #000000。                                                                       |
| navigationBarTextStyle       | string   | black    | 导航栏标题颜色，仅支持 `black` 和 `white`。                                                        |
| navigationBarTitleText       | string   |          | 导航栏标题文字内容。                                                                               |
| navigationStyle              | string   | default  | 导航栏样式。`default`：默认样式。`custom` 自定义导航栏，只保留右上角胶囊按钮。                     |
| onReachBottomDistance        | number   | 50       | 页面上拉触底事件触发时距页面底部距离，单位为 px。                                                  |
| pageOrientation              | string   | portrait | 屏幕旋转设置。取值范围：<br/>`portrait`：竖屏，默认值。<br/>`landscape`：横屏。<br/>`auto`：自动。 |
| usingComponents              | object   |          | 当前页面引用的自定义组件。                                                                         |
| boardMenus                   | array[]  |          | 自定义菜单配置。容器版本 ≥ 2.3.0。                                                                 |

框架页面实例参考 [页面实例](/cn/miniapp/develop/miniapp/framework/api/page)。

## usingComponents

声明页面引用组件。当一个组件被多个页面所引用时，避免重复在页面配置中声明，可使用全局声明的形式。组件路径支持：

1. 绝对路径形式，以 `/` 开头，表示小程序源码目录。
2. 相对路径形式，以 `.` 开头，基于当前 json 文件所在目录。
3. `npm` 三方包。

```json
{
  "usingComponents": {
    "foo": "/absolute/foo/index",
    "foo": "./relative/foo/index",
    "foo": "package/es/foo/index"
  }
}
```

**注意**：路径地址必须精确到文件名，不可省略缺省 `index`。

## 完整示例

```json
{
  "navigationBarBackgroundColor": "#000",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "首页",
  "navigationStyle": "default",
  "backgroundColor": "#000",
  "backgroundTextStyle": "dark",
  "backgroundColorTop": "#fff",
  "backgroundColorBottom": "#fff",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50,
  "disableScroll": false,
  "pageOrientation": "portrait",
  "usingComponents": {
    "foo": "/components/foo/index"
  },
  "boardMenus": [
    {
      "key": "home",
      "iconPath": "@iconPath1",
      "text": "主页"
    }
  ]
}
```