uniapp 任务栏顶部导航适配

uniapp 任务栏顶部导航适配

一、问题说明：

• 1、问题：手机型号不一样头部导航显示样式和高度都不一样，例如：刘海屏、挖孔屏
• 2、解决思路：

  • 利用uni.getSystemInfo() 获取手机设备的型号信息,获取手机状态栏的信息statusBarHeight，在给顶部导航设置高度时比例高度加上状态栏的高度

  • 比例高度x：750/100 = screenWidth / x
    

二、代码示例：

• 下面代码直接是一个头部组件：可以直接使用

<template>
	<view class="header-comp">
		<image  mode="aspectFill" v-if="!nobg" class="bg" src="/static/eam/header-bg.png"/>
		<view class="zw"></view>
		<view class="header" v-if="!isOpacity">
			<image  mode="scaleToFill" v-if="!nobg" class="header-bg" src="/static/eam/header-bg2.png"/>
			<view class="status-bar" :style="{height:statusBarHeight+'px'}"></view>
			<view class="header-bar">
				<image v-if="!noback && !bg" class="back" src="/static/eam/back.png" @click="goBack"/>
				<image v-if="!noback && bg" class="back" src="/static/eam/back-bg.png" @click="goBack"/>
				<view class="title">
					{{title}}
				</view>
				<view class="header-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<view class="header" v-if="isOpacity">
			<image  mode="scaleToFill" :style="{opacity: opacity, height: statusBarHeight + headerBar + 'px'}" class="header-bg" src="/static/eam/header-bg2.png"/>
			<view class="status-bar" :style="{height:statusBarHeight+'px'}"></view>
			<view ref="headerBar" class="header-bar">
				<image :style="{opacity: opacity}" class="back" src="/static/eam/back-bg.png" @click="goBack"/>
				<image :style="{opacity: 1-opacity}" class="back" src="/static/eam/back-bg.png" @click="goBack"/>
				<view class="title">
					{{title}}
				</view>
				<view class="header-right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		props:{
			Number,
			title: String,
			bg: Boolean,
			nobg: Boolean,
			noback: Boolean,
			back: Function,
			isOpacity: {
				type: Boolean,
				default: false
			},
			opacity: Number
		},
		data() {
			return {
				statusBarHeight: 44,
				headerBar: 0
			};
		},
		created(){
			uni.getSystemInfo({    
				success:(res)=> {    
					this.statusBarHeight = res.statusBarHeight;   // 状态栏高度
					this.headerBar = res.screenWidth / 750 * 100
				}    
			});   
		},
		methods:{
			goBack(){
				if(this.back){
					this.back()
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.header{
	position: fixed;
	top: 0;
	width: 750rpx;
	z-index: 99;
}
.header-comp{
	position: relative;
}
.bg{
	position: absolute;
	// #ifndef APP-PLUS-NVUE
	top: calc(-1 * (88rpx - var(--status-bar-height)));
	// #endif
	height: 276rpx;
	width: 750rpx;
}
.zw{
	// #ifndef APP-PLUS-NVUE
	height: calc(100rpx + var(--status-bar-height));
	// #endif
}
.header-bg{
	position: absolute;
	top: 0;
	width: 750rpx;
	background-color: #007AFF;
	// #ifndef APP-PLUS-NVUE
	height: calc(var(--status-bar-height) + 100rpx);
	// #endif
}
.status-bar{
	position: sticky;
	top:0;
	width: 750rpx;
}
.header-bar{
	// #ifndef APP-PLUS-NVUE
	display: flex;
	// #endif
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 30rpx;
	height: 100rpx;
}
.back{
	position: absolute;
	left: 30rpx;
	width: 60rpx;
	height: 60rpx;
}
.title{
	z-index: 2;
	color: #FFFFFF;
	font-size: 36rpx;
}
.header-right{
	position: absolute;
	right: 30rpx;
}
</style>