# page-meta
基礎(chǔ)庫(kù) 2.9.0 開始支持，低版本需做兼容處理。
微信 Windows 版：支持
微信 Mac 版：支持
微信 鴻蒙 OS 版：支持
渲染框架支持情況：Skyline （使用最新 Nightly 工具調(diào)試）、WebView
# 功能描述
頁(yè)面屬性配置節(jié)點(diǎn)，用于指定頁(yè)面的一些屬性、監(jiān)聽頁(yè)面事件。只能是頁(yè)面內(nèi)的第一個(gè)節(jié)點(diǎn)?？梢耘浜?navigation-bar 組件一同使用。
通過(guò)這個(gè)節(jié)點(diǎn)可以獲得類似于調(diào)用 wx.setBackgroundTextStyle wx.setBackgroundColor 等接口調(diào)用的效果。
# 通用屬性
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 | |
|---|---|---|---|---|---|---|
| background-text-style | string | 否 | 下拉背景字體、loading 圖的樣式，僅支持 dark 和 light | 2.9.0 | ||
| background-color | string | 否 | 窗口的背景色，必須為十六進(jìn)制顏色值 | 2.9.0 | ||
| background-color-top | string | 否 | 頂部窗口的背景色，必須為十六進(jìn)制顏色值，僅 iOS 支持 | 2.9.0 | ||
| background-color-bottom | string | 否 | 底部窗口的背景色，必須為十六進(jìn)制顏色值，僅 iOS 支持 | 2.9.0 | ||
| root-background-color | string | 否 | 頁(yè)面內(nèi)容的背景色，用于頁(yè)面中的空白部分和頁(yè)面大小變化 resize 動(dòng)畫期間的臨時(shí)空閑區(qū)域 | 2.12.1 | ||
| page-style | string | "" | 否 | 頁(yè)面根節(jié)點(diǎn)樣式，頁(yè)面根節(jié)點(diǎn)是所有頁(yè)面節(jié)點(diǎn)的祖先節(jié)點(diǎn)，相當(dāng)于 HTML 中的 body 節(jié)點(diǎn) | 2.9.0 | |
| page-font-size | string | "" | 否 | 頁(yè)面 page 的字體大小，可以設(shè)置為 system ，表示使用當(dāng)前用戶設(shè)置的微信字體大小 | 2.11.0 | |
| root-font-size | string | "" | 否 | 頁(yè)面的根字體大小，頁(yè)面中的所有 rem 單位，將使用這個(gè)字體大小作為參考值，即 1rem 等于這個(gè)字體大?。蛔孕〕绦虬姹?2.11.0 起，也可以設(shè)置為 system | 2.9.0 | |
| page-orientation | string | "" | 否 | 頁(yè)面的方向，可為 auto portrait 或 landscape | 2.12.0 | |
| bindresize | eventhandle | 否 | 頁(yè)面尺寸變化時(shí)會(huì)觸發(fā) resize 事件， event.detail = { size: { windowWidth, windowHeight } } | 2.9.0 |
# WebView 特有屬性
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 | |
|---|---|---|---|---|---|---|
| scroll-top | string | "" | 否 | 滾動(dòng)位置，可以使用 px 或者 rpx 為單位，在被設(shè)置時(shí)，頁(yè)面會(huì)滾動(dòng)到對(duì)應(yīng)位置 | 2.9.0 | |
| scroll-duration | number | 300 | 否 | 滾動(dòng)動(dòng)畫時(shí)長(zhǎng) | 2.9.0 | |
| bindscroll | eventhandle | 否 | 頁(yè)面滾動(dòng)時(shí)會(huì)觸發(fā) scroll 事件， event.detail = { scrollTop } | 2.9.0 | ||
| bindscrolldone | eventhandle | 否 | 如果通過(guò)改變 scroll-top 屬性來(lái)使頁(yè)面滾動(dòng)，頁(yè)面滾動(dòng)結(jié)束后會(huì)觸發(fā) scrolldone 事件 | 2.9.0 |
# 示例代碼
<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: '標(biāo)題',
nbLoading: false,
nbFrontColor: '#000000',
nbBackgroundColor: '#ffffff',
},
})