做移动端项目时为了兼容各种手机型号的界面，最好有一个统一的页面组件对样式做统一处理，例如：判断是否显示状态栏，是否显示头部导航，是否空出底部区域等等，本篇会带大家从零到一开发一个 uniapp 的通用页面组件
本次开发的页面，组件，需要完成以下功能
class Page {
constructor() {
this.system = uni.getSystemInfoSync()
this.init()
}
init = () => {
console.log(this.system);
}
}
export default Page<template>
<view class="sf-page" :class="theme">
<!-- 页面头部 -->
<template v-if="customHeader">
<view class="sf-page-header">
<!-- 头部核心 -->
<slot name="header"></slot>
</view>
</template>
<!-- 页面主体 -->
<view class="sf-page-body">
<slot name="body"></slot>
</view>
<!-- 页面底部 -->
<template v-if="customFooter">
<view class="sf-page-footer">
<slot name="footer"></slot>
</view>
</template>
</view>
</template>
<script setup>
import {
computed, toRefs
} from "vue"
import Page from './class/page.js'
const props = defineProps({
customHeader: {
type: Boolean,
default: false
},
customFooter: {
type: Boolean,
default: false
},
})
const page = new Page()
const theme = computed(() => {
return uni.$theme.get()
})
</script>
<style>
.sf-page {
min-height: 100vh;
width: 100%;
}
.sf-page-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 99;
}
.sf-page-body {
}
.sf-page-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 99;
}
</style>api，获取系统状态栏高度import { ref } from 'vue'
class Page {
constructor() {
this.system = uni.getSystemInfoSync()
this.statusBarHeight = 0
this.headerHeight = 45
this.footerHeight = 45
this.init()
}
init = () => {
this.statusBarHeight = this.system.statusBarHeight
}
}
export default Page<template>
<view class="sf-page" :class="theme">
<!-- 页面头部 -->
<template v-if="customHeader">
<view class="sf-page-header">
<!-- 沉浸式状态栏 -->
<view :style="{ height: statusBarHeight + 'px', background: statusBarBG }"></view>
<!-- 头部核心 -->
<view :style="{ height: headerHeight + 'px' }">
<slot name="header"></slot>
</view>
</view>
<!-- 占位 -->
<view :style="{ height: statusBarHeight + headerHeight + 'px' }"></view>
</template>
<!-- 页面主体 -->
<view class="sf-page-body">
<slot name="body"></slot>
</view>
<!-- 页面底部 -->
<template v-if="customFooter">
<view class="sf-page-footer">
<slot name="footer"></slot>
</view>
</template>
</view>
</template>
<script setup>
import {
computed, toRefs
} from "vue"
import Page from './class/page.js'
const props = defineProps({
customHeader: {
type: Boolean,
default: false
},
customFooter: {
type: Boolean,
default: false
},
statusBarBG: {
type: String,
default: 'none'
}
})
const page = new Page()
const { headerHeight, statusBarHeight, footerHeight } = toRefs(page)
const theme = computed(() => {
return uni.$theme.get()
})
</script>页面组件实例化Page 对象，这里注意解构高度属性时，需要使用toRefs 实现响应式， 这样，即可通过 customHeader,customFooter 控制相应区域是否显示，并且根据设置的 height 来控制对应区域的高度， 也可通过 statusBarBG 控制状态栏的颜色
<sf-page :customHeader="true" :customFooter="false" statusBarBG="#333333"> </sf-page>
<sf-page :customHeader="true" :customFooter="true" statusBarBG="#333333">
<template v-slot:header>
<view class="">
// ... 导航
</view>
</template>
<template v-slot:body>
<view class="main">
// ... 内容
</view>
</template>
<template v-slot:footer>
<view class="">
// ... 底部操作
</view>
</template>
</sf-page>这样，就可以根据设计稿的需要，动态的控制是否显示头部导航或底部操作区域啦
到此这篇写一个uniapp通用页面组件的文章就介绍到这了,更多相关uniapp通用页面组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
