uni小程序安全头部和底部高度

想个名字想老半天

已于 2023-08-23 14:17:39 修改

阅读量776

点赞数 1

分类专栏：微信小程序 uniapp vue 文章标签：小程序

于 2023-08-07 18:28:06 首次发布

本文链接：https://blog.csdn.net/MistShown/article/details/132151630

版权

vue 同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

uniapp

10 篇文章 0 订阅

订阅专栏

微信小程序

2 篇文章 0 订阅

订阅专栏

安全头部

小程序中的胶囊高度是40像素左右，从获取系统信息中可以看到：手机状态栏的高度，
到这里我们就可以算出在这里插入图片描述到胶囊底部的距离；
接下来是我自己写的头部组件：
在components文件夹里新建一个topNavbar.vue

`tempalte`
<template>
	<view :style="[allHeight]">
		<view class="fixBox">
			<view :style="[safeStyle]"></view>
			<view class="flexstart mleft" :style="'background:'+bgColor+';color:'+bgColor">
				//这个替换成自己的返回图标
				<u-icon v-if="isBack" class="backImg" size="20" name="arrow-left" :color="textColor" @click="backPage()"></u-icon>
				<view class="navCss" :style="'background:'+bgColor+';color:'+textColor">{{title}}</view>
			</view>
		</view>
		<view class="">
			<view :style="[safeStyle]"></view>
			<view class="navCss mleft" :style="'background:'+bgColor+';color:'+bgColor">{{title}}</view>
		</view>
	</view>
</template>
`script`
<script>
	export default {
		data() {
			return {}
		},
		props: {
			title: {//头部标题
				default: '标题'
			},
			bgColor: {//头部背景色
				default: "#3F85FF"
			},
			textColor: {//标题颜色
				default: "#fff"
			},
			isBack:{//是否展示返回按钮
				default: false,
			}
		},
		computed: {
			safeStyle() {
				const style = {}
				style.height = uni.getSystemInfoSync().statusBarHeight + 'px'
				style.backgroundColor = this.bgColor
				return style
			},
			allHeight(){
				const style = {}
				style.height = (uni.getSystemInfoSync().statusBarHeight + 40) + 'px'
				return style
			}
		},
		methods:{
			backPage(){
				// 返回上一页
				if(this.isBack){
					uni.navigateBack()
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.fixBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 2;
	}
	.backImg{
		font-size: 40rpx;
		padding-right: 32rpx;
	}
	.navCss {
		height: 40px;
		line-height: 40px;
	}
	.mleft{
		padding-left: 32rpx;
	}
	.flexstart{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>

使用方法

//template
   <topNavbar title='会员中心' :textColor='textcolor' :bgColor="bgColor" :isBack="backShow"/>
//script 导入并注册
import navbottom from '@/components/navbottom.vue'
export default {
	data(){
		return{
			textcolor: '#ffffff',//标题颜色
			bgColor: 'rgba(36, 36, 48, 1)',//背景色
			backShow:false,//是否显示返回按钮
		}
	},
	components:{topNavbar}
}

安全底部

在这里插入图片描述

padding-bottom: env(safe-area-inset-bottom);
//为了适配有些机型底部是没有小横线的 可以采取下面的措施；更详细点可以通过获取机型 api 生成合适的底部距离
padding-bottom: calc(env(safe-area-inset-bottom) + 6px);