页面元信息组件

page-meta 是一个页面属性配置组件，可以替代部分 pages.json 的功能，用于设置页面的一些属性及监听页面事件。page-meta 组件允许开发者将页面的配置写入 vue 文件中，并且支持通过变量绑定来动态控制页面配置。

1. 什么是 page-meta 组件？

page-meta 是一种特殊的标签，类似于 HTML 中的 header 标签。开发者可以通过它配置页面的背景颜色、导航栏属性等页面属性，并将页面的配置信息与页面内容放在同一个 vue 文件中，从而增强灵活性。page-meta 组件可以配合 navigation-bar 组件使用，为页面提供更丰富的功能。

使用场景

• 设置页面背景色：通过 page-meta 动态设置页面的背景颜色、顶部和底部窗口的颜色。
• 页面滚动控制：可以通过 page-meta 设置页面滚动位置，并监听页面的滚动事件。
• 页面样式动态控制：通过 page-meta 实现页面根节点样式的动态绑定。

2. page-meta 组件的常用属性

page-meta 提供了多种属性来控制页面的显示效果及行为。以下是常用属性的详细说明及使用示例：

属性	类型	默认值	必填	说明	平台差异说明
background-text-style	String		否	下拉背景字体、loading 图的样式，支持 dark 和 light	微信基础库 2.9.0
background-color	String		否	窗口的背景色，十六进制颜色值	微信基础库 2.9.0
background-color-top	String		否	顶部窗口的背景色，十六进制颜色值，iOS 支持	微信基础库 2.9.0
background-color-bottom	String		否	底部窗口的背景色，十六进制颜色值，iOS 支持	微信基础库 2.9.0
scroll-top	String	""	否	滚动位置，可以使用 px 或 rpx 作为单位	微信基础库 2.9.0、H5 3.7.0、App-vue 3.7.0
scroll-duration	Number	300	否	滚动动画的时长，单位为毫秒	微信基础库 2.9.0
page-style	String	""	否	页面根节点样式，相当于 HTML 中的 body 节点	微信基础库 2.9.0、H5 2.6.7、App-vue 2.6.7
root-font-size	String	""	否	页面的根字体大小，用于定义 rem 单位的基准值	微信基础库 2.9.0、H5 2.6.7、App-vue 2.6.7
enable-pull-down-refresh	Boolean	""	否	是否开启下拉刷新	App 2.6.7
@resize	EventHandle		否	页面尺寸变化时触发的事件，返回页面宽高信息	微信基础库 2.9.0
@scroll	EventHandle		否	页面滚动时触发的事件，返回页面滚动位置	微信基础库 2.9.0
@scrolldone	EventHandle		否	滚动结束时触发的事件，尤其是通过 scroll-top 控制滚动时触发	微信基础库 2.9.0

2.1 动态设置页面背景色

• 说明：通过 background-color 等属性动态设置页面的背景颜色。
• 类型：String
• 默认值：无

<template>
  <page-meta :background-color="bgColor" :background-color-top="bgColorTop" :background-color-bottom="bgColorBottom">
    <view class="content">页面内容</view>
  </page-meta>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const bgColor = ref('#ffffff');
    const bgColorTop = ref('#ff0000'); // 顶部背景颜色
    const bgColorBottom = ref('#0000ff'); // 底部背景颜色

    return { bgColor, bgColorTop, bgColorBottom };
  }
}
</script>

2.2 设置页面滚动

• 说明：通过 scroll-top 和 scroll-duration 控制页面滚动位置及滚动动画时长。
• 类型：String、Number
• 默认值：scroll-top 默认 ""，scroll-duration 默认 300 毫秒

<template>
  <page-meta :scroll-top="scrollTop" :scroll-duration="scrollDuration">
    <view class="content">页面内容</view>
  </page-meta>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const scrollTop = ref('100px'); // 设置滚动位置
    const scrollDuration = ref(500); // 滚动动画时长

    return { scrollTop, scrollDuration };
  }
}
</script>

2.3 设置页面样式和根字体大小

• 说明：通过 page-style 和 root-font-size 设置页面样式和根字体大小，影响页面中使用 rem 单位的元素。
• 类型：String
• 默认值：""

<template>
  <page-meta page-style="background-color: lightgrey;" root-font-size="16px">
    <view class="content" style="font-size: 1rem;">页面内容</view>
  </page-meta>
</template>

<script>
export default {
  setup() {
    return {};
  }
}
</script>

3. 动态设置页面背景和滚动行为

以下案例展示了如何使用 page-meta 组件动态设置页面的背景颜色、滚动位置、页面样式等属性。

<template>
  <page-meta
    :background-color="bgColor"
    :background-color-top="bgColorTop"
    :background-color-bottom="bgColorBottom"
    :scroll-top="scrollTop"
    :scroll-duration="scrollDuration"
    page-style="color: green;"
    root-font-size="18px"
  >
    <view class="content" style="font-size: 1rem;">页面内容</view>
  </page-meta>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const bgColor = ref('#ffffff'); // 设置页面背景颜色
    const bgColorTop = ref('#ff0000'); // 顶部背景颜色
    const bgColorBottom = ref('#0000ff'); // 底部背景颜色
    const scrollTop = ref('200rpx'); // 设置滚动位置
    const scrollDuration = ref(500); // 滚动动画时长

    return { bgColor, bgColorTop, bgColorBottom, scrollTop, scrollDuration };
  }
}
</script>