Skip to main content
Version: 下个版本

PageMeta

info

在 Taro 中使用此组件,需要配合 tarojs-plugin-platform-miniprogram 插件。 相关讨论:#6092

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

支持情况:

参考文档

类型

ComponentType<PageMetaProps>

PageMetaProps

参数类型默认值必填说明
backgroundTextStylestring下拉背景字体、loading 图的样式,仅支持 dark 和 light
backgroundColorstring窗口的背景色,必须为十六进制颜色值
backgroundColorTopstring顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
backgroundColorBottomstring底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持
scrollTopstring""滚动位置,可以使用 px 或者 rpx 为单位,在被设置时,页面会滚动到对应位置
scrollDurationnumber300滚动动画时长
pageStylestring""页面根节点样式,页面根节点是所有页面节点的祖先节点,相当于 HTML 中的 body 节点
rootFontSizestring""页面的根字体大小,页面中的所有 rem 单位,将使用这个字体大小作为参考值,即 1rem 等于这个字体大小
onResizeCommonEventFunction<onResizeEventDetail>页面尺寸变化时会触发 resize 事件,event.detail = { size: { windowWidth, windowHeight } }
onScrollCommonEventFunction<onScrollEventDetail>页面滚动时会触发 scroll 事件,event.detail = { scrollTop }
onScrollDoneCommonEventFunction如果通过改变 scroll-top 属性来使页面滚动,页面滚动结束后会触发 scrolldone 事件

API 支持度

API微信小程序H5React Native
PageMetaProps.backgroundTextStyle✔️
PageMetaProps.backgroundColor✔️
PageMetaProps.backgroundColorTop✔️
PageMetaProps.backgroundColorBottom✔️
PageMetaProps.scrollTop✔️
PageMetaProps.scrollDuration✔️
PageMetaProps.pageStyle✔️
PageMetaProps.rootFontSize✔️
PageMetaProps.onResize✔️
PageMetaProps.onScroll✔️
PageMetaProps.onScrollDone✔️

onResizeEventDetail

参数类型说明
sizeresizeType窗口尺寸

resizeType

窗口尺寸类型

参数类型说明
windowWidthnumber窗口宽度
windowHeightnumber窗口高度

onScrollEventDetail

参数类型
scrollTopnumber