---
title: Page Configuration
---

The `[pagePath].json` file is used to configure the window presentation for the current page. The page configuration saves you more efforts, compared with the `app.json` global configuration. You only need to set `window` related configuration items, without the need to write the `window` key. The configuration items of a specific page override the global configuration items.

## Configuration items

You can set the status bar, navigation bar, title, and window background color when you define the styles for the current page of the miniapp.

| Property                     | Type     | Default value | Description                                                                                                                                                          |
| ---------------------------- | -------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| backgroundColor              | HexColor | #ffffff       | The background color of a specified window.                                                                                                                          |
| backgroundColorBottom        | string   | #ffffff       | The background color of the bottom window, only available on iOS.                                                                                                    |
| backgroundColorTop           | string   | #ffffff       | The background color of the top window, only available on iOS.                                                                                                       |
| backgroundTextStyle          | string   | dark          | The style of drop-down loading. Valid values: `dark` and `light`.                                                                                                    |
| disableScroll                | boolean  | false         | Specifies whether to disable the page scrolling. Default value: `false`. If this property is enabled, the page will be unscrollable.                                 |
| enablePullDownRefresh        | boolean  | false         | Specifies whether to enable global drop-down refresh.                                                                                                                |
| navigationBarBackgroundColor | HexColor | #ffffff       | The background color of the navigation bar. For example, #000000.                                                                                                    |
| navigationBarTextStyle       | string   | black         | The color of the navigation bar title. Valid values: `black` and `white`.                                                                                            |
| navigationBarTitleText       | string   | /             | The text content of the navigation bar title.                                                                                                                        |
| navigationStyle              | string   | default       | The style of the navigation bar. `default`: the default style. `custom`: the custom navigation bar. Only keep the pill button in the top right corner.               |
| onReachBottomDistance        | number   | 50            | The distance from the bottom of the page when the page is pulled up and reaches the bottom, in px.                                                                   |
| pageOrientation              | string   | portrait      | The screen rotation. Valid values: <br/>`portrait`: portrait screen. This is the default value. <br/>`landscape`: landscape screen. <br/>`auto`: automatic rotation. |
| usingComponents              | object   | /             | The custom component referenced by the current page.                                                                                                                 |
| boardMenus                   | array[]  | /             | The settings of a custom menu. The container version is v2.3.0 or later.                                                                                             |

For an instance of a framework page, see [Page instance](/en/miniapp/develop/miniapp/framework/api/page).

## usingComponents

Declare the components referenced by the specified pages. When a component is referenced by multiple pages, you can use a global declaration to avoid repeated declarations in the configuration of each page. The supported component path is as follows:

1. An absolute path, starting with `/`, indicating the source code directory of the miniapp.
2. A relative path, starting with `.` , based on the directory where the current JSON file is located.
3. `npm` third-party packages.

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

**Note**: The path address must be accurate to the file name, and the default `index` cannot be omitted.

## Example

```json
{
  "navigationBarBackgroundColor": "#000",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "Homepage",
  "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": "Homepage"
    }
  ]
}
```