跳到主要内容
版本:4.x

PageMeta

页面属性配置节点,用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。 通过这个节点可以获得类似于调用 Taro.setBackgroundTextStyle Taro.setBackgroundColor 等接口调用的效果。

信息

Taro v3.6.19 开始支持 开发者需要在页面配置里添加:enablePageMeta: true

支持情况:

参考文档

类型

ComponentType<PageMetaProps>

示例代码

// page.config.ts
export default definePageConfig({ enablePageMeta: true, ... })

// page.tsx
function Index () {
return (
<View>
<PageMeta
pageStyle={myPageStyle}
onScroll={handleScroll}
>
<NavigationBar title={title} />
</PageMeta>
</View>
)
}

PageMetaProps

参数类型默认值必填说明
backgroundTextStylestring下拉背景字体、loading 图的样式,仅支持 dark 和 light
backgroundColorstring窗口的背景色,必须为十六进制颜色值
backgroundColorTopstring顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
backgroundColorBottomstring底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
scrollTopstring""滚动位置,可以使用 px 或者 rpx 为单位,在被设置时,页面会滚动到对应位置
scrollDurationnumber300滚动动画时长
pageStylestring""页面根节点样式,页面根节点是所有页面节点的祖先节点,相当于 HTML 中的 body 节点
rootFontSizestring""页面的根字体大小,页面中的所有 rem 单位,将使用这个字体大小作为参考值,即 1rem 等于这个字体大小
rootBackgroundColorstring页面内容的背景色,用于页面中的空白部分和页面大小变化 resize 动画期间的临时空闲区域
pageFontSizestring页面 page 的字体大小,可以设置为 system ,表示使用当前用户设置的微信字体大小
pageOrientationstring页面的方向,可为 auto portrait 或 landscape
onResizeCommonEventFunction<onResizeEventDetail>页面尺寸变化时会触发 resize 事件
onScrollCommonEventFunction<onScrollEventDetail>页面滚动时会触发 scroll 事件
onScrollDoneCommonEventFunction如果通过改变 scroll-top 属性来使页面滚动,页面滚动结束后会触发 scrolldone 事件

API 支持度

API微信小程序支付宝小程序H5React NativeHarmony
PageMetaProps.backgroundTextStyle✔️
PageMetaProps.backgroundColor✔️✔️
PageMetaProps.backgroundColorTop✔️✔️
PageMetaProps.backgroundColorBottom✔️✔️
PageMetaProps.scrollTop✔️✔️
PageMetaProps.scrollDuration✔️✔️
PageMetaProps.pageStyle✔️✔️
PageMetaProps.rootFontSize✔️✔️
PageMetaProps.rootBackgroundColor✔️✔️
PageMetaProps.pageFontSize✔️✔️
PageMetaProps.pageOrientation✔️
PageMetaProps.onResize✔️
PageMetaProps.onScroll✔️✔️
PageMetaProps.onScrollDone✔️

onResizeEventDetail

参数类型必填说明
deviceOrientation"portrait" or "landscape"设备方向
sizeresizeType窗口尺寸

resizeType

窗口尺寸类型

参数类型必填说明
windowWidthnumber窗口宽度
windowHeightnumber窗口高度
screenWidthnumber屏幕宽度
screenHeightnumber屏幕高度

onScrollEventDetail

参数类型
scrollTopnumber