前言
做移动端项目时为了兼容各种手机型号的界面,最好有一个统一的页面组件对样式做统一处理,例如:判断是否显示状态栏,是否显示头部导航,是否空出底部区域等等,本篇会带大家从零到一开发一个 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 = 0this.headerHeight = 45this.footerHeight = 45this.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>
这样,就可以根据设计稿的需要,动态的控制是否显示头部导航或底部操作区域啦
最后
最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享