theme: channing-cyan
开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第24天,点击查看活动详情
前言
做移动端项目时为了兼容各种手机型号的界面,最好有一个统一的页面组件对样式做统一处理,例如:判断是否显示状态栏,是否显示头部导航,是否空出底部区域等等,本篇会带大家从零到一开发一个 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>
这样,就可以根据设计稿的需要,动态的控制是否显示头部导航或底部操作区域啦
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容