组件介绍

un-page 组件是针对 uni-app x 平台的页面容器组件，主要解决了 App 端没有页面级滚动的问题。在 App 端，如需实现页面级滚动，根节点必须是 scroll-view 标签，而在非 App 端（如小程序、H5）则不需要。

该组件会根据当前运行平台自动选择合适的根节点：

• 在 App 端：使用 scroll-view 作为根节点，提供页面级滚动功能
• 在非 App 端：使用 view 作为根节点，保持与原生页面行为一致

基本使用

在页面的根元素使用 un-page 组件即可，组件会自动处理不同平台的差异。

<template>
  <un-page>
    <view class="page-content">
      <view class="page-title">Page 组件示例</view>
      <view class="page-desc">这是一个使用 un-page 组件的页面容器</view>
    </view>
  </un-page>
</template>

<style lang="scss" scoped>
.page-content {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.page-desc {
  font-size: 16px;
  color: #666;
}
</style>

自定义背景色

通过 bgColor 属性可以设置页面的背景颜色：

<template>
  <un-page bgColor="#e6f7ff">
    <!-- 页面内容 -->
  </un-page>
</template>

使用主题变量

通过 themeVars 属性可以传入主题变量，实现更灵活的样式定制：

<template>
  <un-page :themeVars="themeVars">
    <!-- 页面内容 -->
  </un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const themeVars = ref({
  pageBgColor: '#f0f2f5',
  // 其他主题变量
})
</script>

API

Page Props

参数	说明	类型	默认值
bgColor	页面背景颜色	string	-
theme	主题名称	string	-
themeVars	主题变量，用于自定义样式	object	{}
customClass	自定义类名	string	''
customStyle	自定义样式，可以是对象或字符串	object | string	''