外观
Page 页面容器
约 418 字大约 1 分钟
2025-10-31
组件介绍
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 | '' |
