# page-meta

Start from base library version 2.9.0. Please remaining backward compatible.

Page property configuration node, used to specify some properties of the page, monitor page events. Can only be the first node within the page. Can cooperate navigation-bar Components together.

From this node you can get something like the call wx.setBackgroundTextStyle wx.setBackgroundColor And so on.

attribute	type	Default value	Required	Introductions	Minimum version
background-text-style	string		no	Drop Down Background Font, Loading Diagram styles that support only `dark` and `light`	2.9.0
background-color	string		no	The background color of the window must be hexadecimal color value	2.9.0
background-color-top	string		no	The background color of the top window must be a hexadecimal color value, and only iOS Support	2.9.0
background-color-bottom	string		no	The background color of the bottom window must be a hexadecimal color value, and only iOS Support	2.9.0
root-background-color	string		no	Background color for page content, used for white space and page size changes resize Animation periodTemporary free zone	2.12.1
scroll-top	string	""	no	Scroll position, you can use the px or rpx When set, the page scrolls to the corresponding location	2.9.0
scroll-duration	number	300	no	Scroll animation length	2.9.0
page-style	string	""	no	Page root node style, which is the ancestor of all page nodes, equivalent to HTML to hit the target body node	2.9.0
page-font-size	string	""	no	page page You can set the font size to `system` Which indicates the font size of WeChat using the current user's settings	2.11.0
root-font-size	string	""	no	The root font size of the page, all of the rem The font size will be used as a reference value, that is `1rem` Is equal to the font size.Self Mini Program version 2.11.0 Can also be set to `system`	2.9.0
page-orientation	string	""	no	The orientation of the page can be `car` `portrait` or `landscape`	2.12.0
bindresize	eventhandle		no	Triggered when page size changes `resize` Events, `event.detail = { size: { windowWidth, windowHeight } }`	2.9.0
bindscroll	eventhandle		no	Triggers when the page is scrolled `scroll` Events, `event.detail = { scrollTop }`	2.9.0
bindscrolldone	eventhandle		no	If you change `scroll-top` Property to cause the page to scroll, triggered when the page scroll ends `scrolldone` event	2.9.0

# sample code

Preview with Developer Tool

<page-meta
  background-text-style="{{bgTextStyle}}"
  background-color="{{bgColor}}"
  background-color-top="{{bgColorTop}}"
  background-color-bottom="{{bgColorBottom}}"
  scroll-top="{{scrollTop}}"
  page-style="color: green"
  root-font-size="16px"
>
  <navigation-bar
    title="{{nbTitle}}"
    loading="{{nbLoading}}"
    front-color="{{nbFrontColor}}"
    background-color="{{nbBackgroundColor}}"
  />
</page-meta>

Page({
  data: {
    bgTextStyle: 'dark',
    scrollTop: '200rpx',
    bgColor: '#ff0000',
    bgColorTop: '#00ff00',
    bgColorBottom: '#0000ff',
    nbTitle: The title.
    nbLoading: false,
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
  },
})