写一个 uniapp 通用页面组件

最新推荐文章于 2024-06-25 17:51:43 发布

Web_boom

最新推荐文章于 2024-06-25 17:51:43 发布

阅读量681

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/129219496

版权

前言

做移动端项目时为了兼容各种手机型号的界面，最好有一个统一的页面组件对样式做统一处理，例如：判断是否显示状态栏，是否显示头部导航，是否空出底部区域等等，本篇会带大家从零到一开发一个 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>

这样，就可以根据设计稿的需要，动态的控制是否显示头部导航或底部操作区域啦