This page is translated by Google Cloud Translation API

Switch to Chinese

page-meta

The page attribute configuration node, used to specify some page attributes and listen to page events. It can partially replace the functions of pages.json.

Starting from WeChat base library 2.9.0, the page-meta component has been added, which is a special tag, similar to the header tag in html. The background color of the page and the parameters of the native navigation bar can be written in page-meta. HBuilderX 2.6.3+ supports this component and implements it on all platforms.

In a sense, page-meta has a certain substitution effect on pages.json, allowing the page configuration and page content code to be written in a vue file. It can also realize the control of page configuration through variable binding. However, its performance is not as good as that of pages.json, when a new page is loaded, the rendering speed with the writing mode of pages.json is faster.

page-meta can only be the first node in the page. It can be used with the navigation-bar component.

Platform difference description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序	飞书小程序	QQ小程序	快手小程序	京东小程序
√ 2.6.3+	2.6.3+	√ 2.9.0+	√	√	√	x	√	x	x

From HBuilderX 2.6.3, page-meta is supported on all platforms when compiled, but when compiled to WeChat, it is limited by the version of the basic library of WeChat; compiled to other platforms, it is not limited by the platform version.

Attribute description

Properties	Type	Default Value	Required	Description	Version Requirements/Platform Difference Description
background-text-style	string		No	Drop-down background font, loading image style, only supports dark and light	WeChat Basic Library 2.9.0
background-color	string		No	The background color of the window, must be a hexadecimal color value	WeChat Basic Library 2.9.0
background-color-top	string		No	The background color of the top window, must be a hexadecimal color value, only supported by iOS	WeChat Basic Library 2.9.0
background-color-bottom	string		No	The background color of the bottom window must be a hexadecimal color value, only supported by iOS	WeChat Basic Library 2.9.0
scroll-top	string	""	No	Scroll position, you can use px or rpx as the unit, when set, the page will scroll to the corresponding position	WeChat base library 2.9.0, H5 3.7.0, App-vue 3.7.0
scroll-duration	number	300	No	Scrolling Animation Duration	WeChat Basic Library 2.9.0
page-style	string	""	No	The style of the page root node, the page root node is the ancestor node of all page nodes, which is equivalent to the body node in HTML	WeChat Basic Library 2.9.0, H5 2.6.7, App- vue 2.6.7
root-font-size	string	""	No	The root font size of the page, all rem units in the page, will use this font size as a reference value, that is, 1rem is equal to this font size	WeChat Basic Library 2.9.0, H5 2.6.7, App-vue 2.6.7
enable-pull-down-refresh	Boolean	""	No	Whether to enable pull-down refresh?	App 2.6.7
@resize	eventhandle		No	The resize event will be triggered when the page size changes, event.detail = { size: { windowWidth, windowHeight } }	WeChat Basic Library 2.9.0
@scroll	eventhandle		No	The scroll event will be triggered when the page is scrolled, event.detail = { scrollTop }	WeChat Basic Library 2.9.0
@scrolldone	eventhandle		No	If the page is scrolled by changing the scroll-top property, the scrolldone event will be triggered after the page scrolling ends	WeChat Basic Library 2.9.0

Notice

• <page-meta> currently supports only the configurations listed in the table above, and does not support all page.json configurations
• When <page-meta> conflicts with the settings of pages.json, the settings of page.json will be overwritten

head tag

Added in HBuilderX 3.3.0

Under vue3, you can also use the browser's native head tag in page-meta. This usage is only available in vue3 version ssr, which is convenient for seo optimization when compiling to ssr.

<template>
  <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"
  >
		<head> // 仅vue3 ssr支持，此节点下的元素会被拷贝到h5页面的head标签下，可以利用此特性进行seo优化
			<meta name="keyword" :content="title" />
		</head>
  </page-meta>
  <view class="content">
  </view>
</template>

<script>
  export default {
    data() {
      return {
				keyword: '',
      }
    },
		serverPrefetch(){ // 仅vue3版本支持
			this.keyword = "ServerKeyword"
		},
    onLoad() {
    },
    methods: {
    }
  }
</script>

Sample code

<template>
  <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>
  <view class="content">
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bgTextStyle: 'dark',
        scrollTop: '200rpx',
        bgColor: '#ff0000',
        bgColorTop: '#00ff00',
        bgColorBottom: '#0000ff',
        nbTitle: '标题',
        nbLoading: false,
        nbFrontColor: '#000000',
        nbBackgroundColor: '#ffffff'
      }
    },
    onLoad() {
    },
    methods: {
    }
  }
</script>