Page Config

Some configurations in app.json can also be configured for a single page. You can configure the presentation of the current page in the corresponding .json file of the page.

The configuration items in the page will override the same configuration items in app.json for the current page (style-related configuration items belong to the window property in app.json, but the window field does not need to be specified here).

The file content is a JSON object with the following properties:

Configuration Items

Property	Type	Default	Description
navigationBarBackgroundColor	HexColor	#000000	Navigation bar background color, e.g. #000000
navigationBarTextStyle	string	white	Navigation bar title color, status bar color, supports black / white
navigationBarTitleText	string		Navigation bar title text
navigationStyle	string	default	Navigation bar style, supports default / custom
backgroundColor	HexColor	#ffffff	Window background color
backgroundTextStyle	string	dark	Pull-down loading style, supports dark / light
backgroundColorTop	string	#ffffff	Top window background color (iOS only)
backgroundColorBottom	string	#ffffff	Bottom window background color (iOS only)
enablePullDownRefresh	boolean	false	Whether to enable pull-down refresh for the current page
onReachBottomDistance	number	50	Distance from bottom when reach bottom event triggers, in px
pageOrientation	string	portrait	Screen orientation, supports auto / portrait / landscape
disableScroll	boolean	false	If set to true, the page cannot be scrolled vertically
usingComponents	Object	No	Page custom component configuration
initialRenderingCache	string		Page initial rendering cache configuration, supports static / dynamic / capture
style	string	default	Enable new version of component styles
singlePage	Object	No	Single page mode configuration
restartStrategy	string	homePage	Restart strategy configuration
handleWebviewPreload	string	static	Control timing of preloading the next page
visualEffectInBackground	string	No	Hide page content when entering system background to protect user privacy
enablePassiveEvent	Object/boolean	No	Whether event listeners are passive
renderer	string	No	Rendering backend
rendererOptions	Object	No	Rendering backend options
componentFramework	string	No	Component framework

Note: Not all configurations in app.json can be overridden or specified individually in the page, only the options included in this document.

Configuration Example

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "Interface Demo",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

usingComponents

Page custom component configuration

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}